【Vue】高级系列（九）路由 - vue-router - SPA - 基本路由 - 嵌套路由 - 编程式路由导航

1. 理解

1.1. 说明

1. 官方提供的用来实现SPA 的vue 插件
2. github: https://github.com/vuejs/vue-router
3. 中文文档: http://router.vuejs.org/zh-cn/
4. 下载: npm install vue-router --save

1.2. 相关API 说明

1. VueRouter(): 用于创建路由器的构建函数

new VueRouter({
   
// 多个配置项
})

2. 路由配置

routes: [
	{
    // 一般路由
		path: '/about',
		component: About
	},
	{
    // 自动跳转路由
		path: '/',
		redirect: '/about'
	}
]

3. 注册路由器

import router from './router'
new Vue({
   
	router
})

4. 使用路由组件标签

1. <router-link>: 用来生成路由链接

<router-link to="/xxx">Go to XXX</router-link>

2. <router-view>: 用来显示当前路由组件界面

<router-view></router-view>

2. 基本路由

2.1. 效果

2.2. 路由组件

Home.vue
About.vue

2.3. 应用组件: App.vue

<template>
  <div>
    <div class="row">
      <div class="col-xs-offset-2 col-xs-8">
        <div class="page-header"><h2>Router Test</h2></div>
      </div>
    </div>

    <div class="row">
      <div class="col-xs-2 col-xs-offset-2">
        <div class="list-group">
          <!--生成路由链接-->
          <router-link to="/about" class="list-group-item">About</router-link>
          <router-link to="/home" class="list-group-item">Home</router-link>
        </div>
      </div>
      <div class="col-xs-6">
        <div class="panel">
          <div class="panel-body">
            <!--显示当前组件-->
            <keep-alive>
              <router-view msg="abc"></router-view>
            </keep-alive>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

2.4. 路由器模块: src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'

import About from '../pages/About'
import Home from '../pages/Home'

Vue.use(Router)

export default new Router({
   
  routes: [
    {
   
      path: '/about',
      component: About
    },
    {
   
      path: '/home',
      component: Home
    },
    {
   
      path: '/',
      component: About
    }
  ]
})

2.5. 注册路由器: main.js

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
    // 配置对象的属性名都是一些确定的名称，不能随便修改
  el: '#app',
  router,
  components: {
    App },
  template: '<App/>'
})

2.6. 优化路由器配置

linkActiveClass: 'active', // 指定选中的路由链接的class

2.7. 总结: 编写使用路由的3 步

1. 定义路由组件
2. 注册路由
3. 使用路由

<router-link>
<router-view>

3. 嵌套路由

3.1. 效果

3.2. 子路由组件

News.vue

<template>
  <ul>
    <li v-for="(news, index) in newsArr" :key="index">{
  { news }}</li>
  </ul>
</template>

<script>
export default {
     
  data()