理解

5.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

5.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）使用路由组件标签

a.用来生成路由链接

<router-link>

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

b. 用来显示当前路由组件界面

<router-view>

<router-view></router-view>

基本路由

1、路由组件
Home.vue

About.vue

2、应用组件: App.vue

<div>
    <!--路由链接-->
    <router-link to="/about">About</router-link>
    <router-link to="/home">Home</router-link>
    <!--用于渲染当前路由组件-->
    <router-view></router-view>
</div>

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

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

4、 注册路由器: main.js

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

// 创建 vue 配置路由器
new Vue({
    el: '#app', 
    router,
    render: h => h(app)
})

5、 优化路由器配置

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

6、总结: 编写使用路由的 3 步
1）定义路由组件

2）注册路由

3）使用路由

<router-link>
<router-view>

嵌套路由

1、子路由组件

News.vue
Message.vue
2 、配置嵌套路由: router.js

path: '/home', 
component: home, 
children: [
    {
        path: 'news', 
        component: News
    },
    {
        path: 'message', 
        component: Message
    }
]

3、路由链接: Home.vue

<router-link to="/home/news">News</router-link>
<router-link to="/home/message">Message</router-link>

<router-view></route-view>

向路由组件传递数据

1、 方式 1: 路由路径携带参数(params/query)
1）配置路由

children: [
    {
        path: 'mdetail/:id', 
        component: MessageDetail
    }
]

2）路由路径

<router-link :to="'/home/message/mdetail/'+m.id">{{m.title}}</router-link>

3）路由组件中读取请求参数

this.$route.params.id

2、方式 2:
属性携带数据

<router-view>

<router-view :msg="msg"></router-view>

缓存路由组件对象

1、理解

1）默认情况下, 被切换的路由组件对象会死亡释放, 再次回来时是重新创建的

2）如果可以缓存路由组件对象, 可以提高用户体验

2、 编码实现

<keep-alive>
    <router-view></router-view>
</keep-alive>

编程式路由导航

1、 相关 API
1）this.$router.push(path):

相当于点击路由链接(可以返回到当前路由界面)

2）this.$router.replace(path):

用新路由替换当前路由(不可以返回到当前路由界面)

3）this.$router.back():

请求(返回)上一个记录路由

4）this.$router.go(-1):

请求(返回)上一个记录路由

5）this.$router.go(1):

请求下一个记录路由