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

Go to XXX

三、嵌套路由

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

四、向路由组件传递数据

（一）、params方式

方案一：

传递方式

routerlink传参

路由配置

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

this.$route.params.num

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

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

方案二：

传递方式

push传参

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

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

方案三：

传递方式

push传参

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

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

方案四：

传递方式

push传参

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方式

传递方式

hello

获取

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

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

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

（三）、query方式

方案一

传递方式

test

获取

this.$route.query

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

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

方案二：

传递方式

push传参

获取

this.$route.query.id

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

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

五、缓存路由组件

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

六、路由的编程式导航

1.this.$router.push(path)

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

2.this.$router.replace(path)

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

3.this.$router.back()

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

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

NAT Vue

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。