vue-router路由简单使用和示例（声明式导航和编程式导航）

1.理解vue-router

1. 说明

1. 官方提供的用来实现SPA的vue插件
2. github
3. 中文文档:
4. 命令安装 npm install vue-router --save

2. 相关API说明

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

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

2. 路由配置

  routes: [
      { // 一般路由
        path: '/about',
        component: About
      },
      { // 自动跳转路由（意思：如果请求/就自动跳到/about）
        path: '/', 
        redirect: '/about'
      }
    ]

3. 注册路由器

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

4. 使用路由组件标签（声明式导航）

 1. <router-link>: 用来生成路由链接
    <router-link to="/xxx">Go to XXX</router-link>
2. <router-view>: 用来显示当前路由组件界面
    <router-view></router-view>

备注： React是用配置路由

2.配置基本路由和声明式导航

1. 效果
   

2. 路由组件
   Home.vue
   About.vue

3. 应用组件: App.vue（声明式导航）

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

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

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

5. 注册路由器: main.js

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

6. 优化路由器配置

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

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

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

  <router-link>
  <router-view>

3. 嵌套路由

1. 效果
   

2. 子路由组件
   News.vue
   Message.vue

3. 配置嵌套路由: router.js

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

5.3.4. 路由链接: Home.vue

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

4. 向路由组件传递数据

效果

总结：

方式1: 路由路径携带参数(param/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: 属性携带数据

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

5. 缓存路由组件对象

1. 理解

1. 默认情况下, 被切换的路由组件对象会死亡释放, 再次回来时是重新创建的
2. 如果可以缓存路由组件对象, 可以提高用户体验

2. 编码实现

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

6. 编程式路由导航

1. 效果
   

2. 相关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): 请求下一个记录路由