结合webpack使用vue-router

结合webpack使用vue-router

1、cnpm i vue-router -S

2、在main.js中导入vue-router包，手动安装VueRouter

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);

3、在main.js中导入各个Vue组件

4、创建路由对象

5、将路由对象挂载到vm上

注意：

1、render会把el指定的容器中 的所有的内容都清空覆盖，所以不要把路由的router-view 和router-link直接写到el所控制的元素中； 

2、App这个组件，是通过vm实例的render函数渲染出来的；render函数如果要渲染组件，渲染出来的组件，只能放到el: '#app'所指定的元素中；

3、Account和GoodsList组件，是通过路由匹配监听到的，所以，这两个组件，只能展示到属于路由的中去；

index.html

main.js

// main.js 是项目的JS入口文件
import Vue from 'vue';
// 导入vue-router包
import VueRouter from 'vue-router';
// 手动安装VueRouter
Vue.use(VueRouter);

import app from './App.vue';
import account from './main/Account.vue';
import goodslist from './main/GoodsList.vue';

// 创建路由对象
var router = new VueRouter({
    routes: [
        { path: '/account', component: account },
        { path: '/goodslist', component: goodslist }
    ]
})

var vm = new Vue({
    el: '#app',
    data: {
        msg: '1234'
    },
    render: c => c(app),
    // 将路由对象挂载到vm上
    router 
})

App.vue

结合webpack实现children子路由

main.js

// main.js 是项目的JS入口文件
import Vue from 'vue';
// 导入vue-router包
import VueRouter from 'vue-router';
// 手动安装VueRouter
Vue.use(VueRouter);

import app from './App.vue';
import account from './main/Account.vue';
import goodslist from './main/GoodsList.vue';
// 导入account的子路由组件
import login from './subcom/login.vue';
import register from './subcom/register.vue';
// 创建路由对象
var router = new VueRouter({
    routes: [
        {
            path: '/account',
            component: account,
            children: [
                { path: 'login', component: login },
                { path: 'register', component: register }
            ]
        },
        { path: '/goodslist', component: goodslist }
    ]
})

var vm = new Vue({
    el: '#app',
    data: {
        msg: '1234'
    },
    render: c => c(app),
    // 将路由对象挂载到vm上
    router 
})

Account.vue

抽离路由模块

在src文件夹下，建一个router.js文件，路由相关的都放在这个文件里面

main.js

// main.js 是项目的JS入口文件
import Vue from 'vue';
// 导入vue-router包
import VueRouter from 'vue-router';
// 手动安装VueRouter
Vue.use(VueRouter);
// 导入app组件
import app from './App.vue';
// 导入自定义的路由模块
import router from './router.js';
var vm = new Vue({
    el: '#app',
    data: {
        msg: '1234'
    },
    render: c => c(app),
    // 将路由对象挂载到vm上
    router 
})

router.js

import Vue from 'vue';
// 导入vue-router包
import VueRouter from 'vue-router';
// 手动安装VueRouter
Vue.use(VueRouter);

import account from './main/Account.vue';
import goodslist from './main/GoodsList.vue';
// 导入account的子路由组件
import login from './subcom/login.vue';
import register from './subcom/register.vue';
// 创建路由对象
var router = new VueRouter({
    routes: [
        {
            path: '/account',
            component: account,
            children: [
                { path: 'login', component: login },
                { path: 'register', component: register }
            ]
        },
        { path: '/goodslist', component: goodslist }
    ]
})

// 把路由对象暴露出去
export default router