结合webpack实现children子路由,抽离路由模块

　　demo结构

　　

　　package.json、webpack.config.js、index.html与上一篇博客相同。

　　main.js

// 这是项目的入口js文件
// import $ from 'jquery';
import './css/common.css';

// 注意：在webpack中，使用下面这句导入vue，功能不完整，只提供runtime-only的方式，并没没有提供向网页中那样的使用方式
// import Vue from 'vue';
// 导入完整的vue
import Vue from '../node_modules/vue/dist/vue.js';
import VueRouter from 'vue-router';
Vue.use(VueRouter);

// 导入App组件
import App from './App.vue';
// 默认webpack无法处理.vue文件，第一步安装第三方loader： npm i vue-loader vue-template-compiler -D
// 第二步：webpack.config.js配置 { test: /\.vue$/, use: 'vue-loader' }

import router from './router.js';

var vm = new Vue({
    el: '#app',
    // render：将App组件渲染到el指定的div#app中（div#app中其他内容被覆盖）
    render: c => c(App),
    router
});

　　router.js

import VueRouter from 'vue-router';

import account from './components/account.vue';
import goodslist from './components/goodslist.vue';
import login from './components/account/login.vue';
import register from './components/account/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;

　　App.vue

<template>
<div>
    <h1>App组件</h1>
    菜单：
    <router-link to="/account">Account</router-link>
    <router-link to="/goodslist">GoodsList</router-link>

    <router-view></router-view>
</div>
</template>

<script></script>
<style></style>

　　account.vue

<template>
<div>
    <h1>account组件</h1>

    <router-link to="/account/login">Login</router-link>
    <router-link to="/account/register">Register</router-link>

    <router-view></router-view>
</div>
</template>

<script></script>
<style></style>