從0到1構(gòu)建vueSSR項目之路由的構(gòu)建
更新時間：2019年03月07日 09:51:02 作者：紳士
這篇文章主要介紹了從0到1構(gòu)建vueSSR項目之路由的構(gòu)建，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
vue開發(fā)依賴的相關(guān)配置
今天先做客戶端方面的配置，明天再做服務(wù)端的部分。
那么馬上開始吧~
修改部分代碼
腳手架生成的代碼肯定是不適合我們所用的 所以要修改一部分代碼
//App.vue
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
<style>
html,body,#app,#app>*{
width: 100%;
height: 100%;
}
body{
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
font-size: 16px;
margin: 0;
overflow-x: hidden;
}
img{
width: 200px;
}
</style>
修改main.js
main.js 是我們應(yīng)用程序的「通用 entry」。
在純客戶端應(yīng)用程序中，我們將在此文件中創(chuàng)建根 Vue 實例，并直接掛載到 DOM。
但是，對于服務(wù)器端渲染(SSR)，責(zé)任轉(zhuǎn)移到純客戶端 entry 文件。
main.js 簡單地使用 export 導(dǎo)出一個 createApp 函數(shù)：
import Vue from 'vue';
Vue.config.productionTip = false;
import App from './App.vue';
//router store 實例
//這么做是避免狀態(tài)單例
export function createApp() {
const app = new Vue({
//掛載router，store
render: h => h(App)
})
//暴露app實例
return { app };
}
添加Vue.config.js配置
webpack的入口文件有兩個，一個是客戶端使用，一個是服務(wù)端使用。
今天只做客戶端部分。
src/vue.config.js
module.exports = {
css: {
extract: false//關(guān)閉提取css,不關(guān)閉 node渲染會報錯
},
configureWebpack: () => ({
entry: './src/entry/client'
})
}
根目錄創(chuàng)建 entry 文件夾，以及webpack入口代碼
mdkir entry
cd entry
創(chuàng)建 入口文件
client.js 作為客戶端入口文件。
server,js 作為服務(wù)端端入口文件。 //先創(chuàng)建不做任何配置
entry/client.js
import { createApp } from '../main.js';
const { app } = createApp();
app.$mount('#app');
路由和代碼分割
官方說明的已經(jīng)很清楚了，我就不做過多介紹了，下面直接展示代碼
添加新路由，這里將存放pages的相關(guān)路由
src/pages/router/index.js
/**
*
* @method componentPath 路由模塊入口
* @param {string} name 要引入的文件地址
* @return {Object}
*/
function componentPath (name = 'home'){
return {
component:() => import(`../${name}/index.vue`)
}
}
export default [
{
path: '/home',
...componentPath(),
children: [
{
path: "vue",
name: "vue",
...componentPath('home/vue')
},
{
path: "vuex",
name: "vuex",
...componentPath('home/vuex')
},
{
path: "vueCli3",
name: "vueCli3",
...componentPath('home/vueCli3')
},
{
path: "vueSSR",
name: "vueSSR",
...componentPath('home/vueSSR')
}
]
}
]
src/router.config.js作為路由的總配置 易于管理
//路由總配置
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
//為什么采用這種做法。
//如果以后有了別的大模塊可以單獨開個文件夾與pages平級
//再這里導(dǎo)入即可。這樣易于管理
// pages
import pages from './pages/router';
export function createRouter() {
return new VueRouter({
mode: 'history',
routes: [
{
path: "*",
redirect: '/home/vue'
},
...pages
]
})
}
更新main.js
import Vue from 'vue';
Vue.config.productionTip = false;
import App from './App.vue';
+ import { createRouter } from './router.config.js'
//router store 實例
//這么做是避免狀態(tài)單例
export function createApp() {
+ const router = createRouter()
const app = new Vue({
+ router,
render: h => h(App)
})
//暴露app,router實例
return { app, router };
}
更新 client.js
由于使用的路由懶加載，所以必須要等路由提前解析完異步組件，才能正確地調(diào)用組件中可能存在的路由鉤子。
// client.js
import { createApp } from '../main.js';
const { app, router } = createApp();
router.onReady( () => {
app.$mount('#app');
})
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue 文字橫向無縫走馬燈組件的實現(xiàn)代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04
Vue3.0相比較于之前的版本更快、更小、更易于維護(hù)、更貼近原生、對開發(fā)者更友好，本文就Vue3.0進(jìn)行詳細(xì)介紹，需要了解的小伙伴可以參考一下這篇文章2021-09-09
本文主要介紹了vite打包靜態(tài)文件打開顯示空白的解決，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
Vue3 Element Plus el-form表單組件示例詳解
這篇文章主要介紹了Vue3 Element Plus el-form表單組件,Element Plus 是 ElementUI 的升級版，提供了更多的表單控件和功能，同時還改進(jìn)了一些細(xì)節(jié)和樣式，本文結(jié)合示例代碼給大家詳細(xì)講解，需要的朋友可以參考下2023-04-04
vue面試created中兩次數(shù)據(jù)修改會觸發(fā)幾次頁面更新詳解
這篇文章主要為大家介紹了vue面試created中兩次數(shù)據(jù)修改會觸發(fā)幾次頁面更新問題解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
這篇文章主要為大家詳細(xì)介紹了vue3實現(xiàn)移動端滑動模塊，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
Vue-input框checkbox強(qiáng)制刷新問題
這篇文章主要介紹了Vue-input框checkbox強(qiáng)制刷新問題，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04
這篇文章主要介紹了vue實現(xiàn)禁止瀏覽器記住密碼功能的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
Pinia是Vue的存儲庫,它允許您跨組件/頁面共享狀態(tài),Pinia的成功可以歸功于他管理存儲數(shù)據(jù)的獨特功,下面這篇文章主要給大家介紹了關(guān)于Vue3中pinia使用方法的相關(guān)資料,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了Vue.extend構(gòu)造器的詳解的相關(guān)資料,需要的朋友可以參考下2017-07-07