8. webpack 中路由的配置

1. 安装 vue-router

yarn add vue-router

2. main.js

// 核心入口文件
// 使用App组件，渲染 index.html 的视图
import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
import Home from './views/Home.vue';
import Login from './views/Login.vue';

Vue.use(VueRouter);

const router = new VueRouter({
    routes: [
        { path: '/', redirect: '/home' },
        { path: '/home', component: Home },
        { path: '/login', component: Login },
    ]
});

new Vue({
    el: '#app',
    // 使用 vue 底层的渲染方法
    // 使用 App 组件作为根组件，将来渲染视图
    render: (createElement) => {
        return createElement(App);
    },
    router
})

3. router 拆分

router/index.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';
import Login from '../views/Login.vue';

Vue.use(VueRouter);

const router = new VueRouter({
    routes: [
        { path: '/', redirect: '/home' },
        { path: '/home', component: Home },
        { path: '/login', component: Login },
    ]
});

export default router

main.js

// 核心入口文件
// 使用App组件，渲染 index.html 的视图
import Vue from 'vue';
import App from './App.vue';
import router from './router';

new Vue({
    el: '#app',
    // 使用 vue 底层的渲染方法
    // 使用 App 组件作为根组件，将来渲染视图
    render: (createElement) => {
        return createElement(App);
    },
    router
})

等价于：
new Vue({
    // 使用 vue 底层的渲染方法
    // 使用 App 组件作为根组件，将来渲染视图
    render: createElement => createElement(App),
    router
}).$mount('#app');