vue路由1.0_从0到1构建vueSSR项目之路由的构建

vue开发依赖的相关配置

今天先做客户端方面的配置，明天再做服务端的部分。

那么马上开始吧~

修改部分代码

脚手架生成的代码肯定是不适合我们所用的 所以要修改一部分代码

//App.vue

export default {

name: 'app'

}

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;

}

修改main.js

main.js 是我们应用程序的「通用 entry」。

在纯客户端应用程序中，我们将在此文件中创建根 Vue 实例，并直接挂载到 DOM。

但是，对于服务器端渲染(SSR)，责任转移到纯客户端 entry 文件。

main.js 简单地使用 export 导出一个 createApp 函数：

import Vue from 'vue';

Vue.config.productionTip = false;

import App from './App.vue';

//router store 实例

//这么做是避免状态单例

export function createApp() {

const app = new Vue({

//挂载router，store

render: h => h(App)

})

//暴露app实例

return { app };

}

添加Vue.config.js配置

webpack的入口文件有两个，一个是客户端使用，一个是服务端使用。

今天只做客户端部分。

src/vue.config.js

module.exports = {

css: {

extract: false//关闭提取css,不关闭 node渲染会报错

},

configureWebpack: () => ({

entry: './src/entry/client'

})

}

根目录创建 entry 文件夹，以及webpack入口代码

mdkir entry

cd entry

创建 入口文件

client.js 作为客户端入口文件。

server,js 作为服务端端入口文件。 //先创建不做任何配置

entry/client.js

import { createApp } from '../main.js';

const { app } = createApp();

app.$mount('#app');

路由和代码分割

添加新路由，这里将存放pages的相关路由

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平级

//再这里导入即可。这样易于管理

// 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 实例

//这么做是避免状态单例

export function createApp() {

+ const router = createRouter()

const app = new Vue({

+ router,

render: h => h(App)

})

//暴露app,router实例

return { app, router };

}

更新 client.js

由于使用的路由懒加载，所以必须要等路由提前解析完异步组件，才能正确地调用组件中可能存在的路由钩子。

// client.js

import { createApp } from '../main.js';

const { app, router } = createApp();

router.onReady( () => {

app.$mount('#app');

})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。