在webpack中使用vue-router及路有嵌套

1、安装及导入

安装vue-router 包

cnpm i vue-router -S

如果在模块化工程中，使用它，必须要通过Vue.use()明确地安装路由功能

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)
//如果使用全局的script标签，则无须如此（手动安装）

2、结合webpack使用vue-router

main.js

import Vue from 'vue'
// 1. 导入 vue-router 包
import VueRouter from 'vue-router'
// 2. 手动安装 VueRouter 
Vue.use(VueRouter)
// 导入App组件
import app from './App.vue'
import account from './main/Account.vue'
import goodslist from './main/GoodsList.vue'

// 3、创建路由对象

var router = new VueRouter({
  routes: [
    // account goodlist
    { path: '/account', component: account },
    { path: '/goodslist', component: goodslist }
  ]
})

var vm = new Vue({
  el: '#app',
  render: c => c(app),// render 会把 el 指定的容器中，所有的内容都清空覆盖，所以 不要 把 路由的 router-view 和 router-link 直接写到 el 所控制的元素中
  router//4、将路由对象挂在到vm上
})

注意： App 这个组件，是通过 VM 实例的 render 函数，渲染出来的， render 函数如果要渲染 组件， 渲染出来的组件，只能放到 el: ‘#app’ 所指定的 元素中；
Account 和 GoodsList 组件， 是通过 路由匹配监听到的，所以， 这两个组件，只能展示到 属于 路由的 中去；

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和GoodsList.vue

<template>
  <div>
    <h1>这是Account组件</h1>
  </div>
</template>
<script>

</script>

<style></style>

<template>
  <div>
    <h1>这是GoodsList组件</h1>
  </div>
</template>
<script>

</script>

<style></style>

效果

3、webpack实现路由嵌套

在account组件下加入login和register两个子组件
main.js

import Vue from 'vue'
// 1. 导入 vue-router 包
import VueRouter from 'vue-router'
// 2. 手动安装 VueRouter 
Vue.use(VueRouter)
// 导入App组件
import app from './App.vue'
// 导入account组件
import account from './main/Account.vue'
// 导入goodslist组件
import goodslist from './main/GoodsList.vue'
// 导入account 子组件
import login from './subcom/login.vue'
import register from './subcom/register.vue'

// 3、创建路由对象

var router = new VueRouter({
  routes: [
    // account goodlist
    {
      path: '/account',
      component: account,
      children: [
        { path: 'login', component: login },
        { path: 'register', component: register }
      ]

    },
    { path: '/goodslist', component: goodslist }
  ]
})

var vm = new Vue({
  el: '#app',
  render: c => c(app),// render 会把 el 指定的容器中，所有的内容都清空覆盖，所以 不要 把 路由的 router-view 和 router-link 直接写到 el 所控制的元素中
  router//4、将路由对象挂在到vm上
})
// 注意： App 这个组件，是通过 VM 实例的 render 函数，渲染出来的， render 函数如果要渲染 组件， 渲染出来的组件，只能放到 el: '#app' 所指定的 元素中；
// Account 和 GoodsList 组件， 是通过 路由匹配监听到的，所以， 这两个组件，只能展示到 属于 路由的 <router-view></router-view> 中去；

App.vue，GoodsList.vue内容不变
Account.vue内容如下

<template>
  <div>
    <h1>这是Account组件</h1>
    <router-link to="/account/login">登录</router-link>
    <router-link to="/account/register">注册</router-link>
    <router-view></router-view>
  </div>
</template>
<script>

</script>

<style></style>

login.vue与register.vue

<template>
  <div>
   <h1>这是注册组件</h1> 
  </div>
</template>
<script>

</script>
<style></style>

4、为组件添加样式

<style lang="scss" scoped>
/* 普通的 style 标签只支持 普通的 样式，如果想要启用 scss 或 less ，需要为 style 元素，设置 lang 属性 */
// 只要 咱们的 style 标签， 是在 .vue 组件中定义的，那么，推荐都为 style 开启 scoped 属性
body {
  div {
    font-style: italic;
  }
}
</style>

5、抽离路由模块

创建 router.js

import VueRouter from 'vue-router'

// 导入 Account 组件
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'

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

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

main.js内容

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

// 导入 app 组件
import app from './App.vue'

// 导入 自定义路由模块
import router from './router.js'

var vm = new Vue({
  el: '#app',
  render: c => c(app),