Vue之Vue Router要点梳理

Vue Router 是 Vue.js (opens new window) 官方的路由管理器。主要应用于构建单页面应用。

本文不会详细介绍各种概念，主要是梳理Vue Router在使用中的知识要点，满满的干货哦~

附Vue Router思维导图一张：

一、Vue Router安装

对于vue全家桶的项目，不需要再安装Vue Router，如果项目里没有集成Vue Router，可以使用以下命令，在项目目录里安装即可：

npm install vue-router --save

此处附官方文档地址：https://router.vuejs.org/zh/，可方便查阅。

二、使用路由三步曲

1.注册路由器: main.js

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

2.创建路由器

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

3.使用路由组件标签

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

三、嵌套路由

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

四、向路由组件传递数据

（一）、params方式

方案一：

传递方式

<router-link to="/Test/123">routerlink传参</router-link>
<router-view/>

路由配置

{
      path: '/Test/:num',
      name: 'Test',
      component: Test
    }

获取方式

this.$route.params.num

页面地址：http://localhost:8083/#/Test/123

特点：刷新页面仍然能获取

方案二：

传递方式

<button @click="deliverParams(123)">push传参</button>
<router-view/>

methods: {
      deliverParams(id) {
        this.$router.push({
          path: `/Test/${id}`
        })
      }
}

路由配置

{
      path: '/Test/:id',
      name: 'Test',
      component: Test
    }

获取方式

this.$route.params.id

页面地址：http://localhost:8083/#/Test/123

特点：刷新页面仍然能获取

方案三：

传递方式

<button @click="deliverParams(123)">push传参</button>
    <router-view />

methods: {
      deliverParams(id) {
        this.$router.push({
          name: 'Test',
          params: {
            id: id
          }
        })
      }
}

路由配置

{
      path: '/Test/:id',
      name: 'Test',
      component: Test
    }

获取方式

this.$route.params.id

页面地址：http://localhost:8083/#/Test/123

特点：刷新页面仍然能获取

方案四：

传递方式

<button @click="deliverParams(123)">push传参</button>
    <router-view />

methods: {
      deliverParams(id) {
        this.$router.push({
          name: 'Test',
          params: {
            id: id
          }
        })
      }
}

路由配置

{
      path: '/Test',
      name: 'Test',
      component: Test
    }

获取方式

this.$route.params.id

页面地址：http://localhost:8083/#/Test

特点：刷新页面获取不到

（二）、props方式

传递方式

<router-link to="/">hello</router-link>
<router-view msg='abc'/>

获取

props: { // 声明接受数据
      msg: String
    },
mounted() {
      console.log(this.msg);
    },

页面地址：http://localhost:8083/#/Test

特点：刷新页面仍然能获取

（三）、query方式

方案一

传递方式

<router-link to="/Test?zzz=123&yyy=000">test</router-link>
<router-view/>

获取

this.$route.query

页面地址：http://localhost:8083/#/Test?zzz=123&yyy=000

特点：刷新页面仍然能获取

方案二：

传递方式

<button @click="deliverQuery(123)">push传参</button>
    <router-view />

获取

this.$route.query.id

页面地址：http://localhost:8083/#/Test?id=123

特点：刷新页面仍然能获取

五、缓存路由组件

keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。具体使用方式如下：

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

六、路由的编程式导航

1.this.$router.push(path)

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

2.this.$router.replace(path)

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

3.this.$router.back()

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

以上是我整理的vue-router使用的相关知识点，其中路由传参的各种方式，如何使用，如何获取参数，各个方式直接的特点，都有列出哦~