前言
本篇讲述Vue中路由的使用
一、路由
-
路由就是一种对应关系
-
之前的后端渲染（存在性能问题）
-
Ajax 前端渲染（性能ok，但是不支持浏览器的前进后退操作）
-
SPA（Single Page Application）单页应用程序：整个网站只有一个页面，内部的变化通过 Ajax 局部更新实现、同时支持浏览器地址栏的前进和后退操作
-
SPA 的原理之一：基于 URL 地址的 hash（hash 的变化会导致浏览器记录访问历史的变化，但是 hash 的变化不会触发新的 URL 请求）
-
在实现 APA 过程中，最核心的技术点就是前端路由
后端路由
-
根据不同的 URL，返回不同的内容
-
URL 地址与服务器资源之间的对应关系
前端路由
-
根据不同的用户事件，显示不同的页面内容
-
用户事件与事件处理函数之间的关系
二、Vue-Router
基本特性
-
支持 HTML5 的历史模式或 hash 模式
-
支持嵌套路由
-
支持路由参数
-
支持编程式路由
-
支持命名路由
基本使用
- 引入相关的库文件
- 添加路由链接
- 添加路由填充位置
- 定义路由组件
- 创建路由实例并配置相关规则
- 把路由挂载到Vue根实例中
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app"><!-- step2: 添加路由链接 --><router-link to="/user">user</router-link><router-link to="/register">register</router-link><!-- step3: 添加路由填充位 --><router-view></router-view></div><!-- step1: 引入 --><script src="./vue.js"></script><script src="./vue-router_3.0.2.js"></script><script>// step4: 定义路由组件const User = {template: '<h1>user</h1>'}const Register = {template: '<h1>register</h1>'};// step5: 创建路由实例并配置规则const router = new VueRouter({routes: [{path: '/user',component: User},{path: '/register',component: Register}]});// step6: 把路由挂载到 Vue 实例中new Vue({el: '#app',router});</script>
</body></html>路由重定向
用户在访问地址 A 的时候，强制用户跳转到 B，从而展示特定的组件页面！
const router = new VueRouter({// 所有的路由规则routes: [{ path: '/', redirect: '/user' },{ path: '/user', component: User },{ path: '/register', component: Register }]
})路由嵌套
const router = new VueRouter({// 所有的路由规则routes: [{ path: '/', redirect: '/user' },{ path: '/user', component: User },// children 数组表示子路由规则{path: '/register', component: Register, children: [{ path: '/register/tab1', component: Tab1 },{ path: '/register/tab2', component: Tab2 }]}]
})动态路由匹配
const router = new VueRouter({// 所有的路由规则routes: [{ path: '/', redirect: '/user' },{ path: '/user/:id', component: User },{ path: '/register', component: Register }]
})获取动态路由中参数的方式
- $route.params.id
const User = {template: '<h1>User 组件 -- 用户id为: {{$route.params.id}}</h1>'
}- 为props指定布尔值
路由规则中开启props传参
const router = new VueRouter({// 所有的路由规则routes: [{ path: '/', redirect: '/user' },{ path: '/user/:id', component: User, props: true },{ path: '/register', component: Register }]
})const User = {props: ['id'],template: '<h1>User 组件 -- 用户id为: {{id}}</h1>'
}- 为props指定对象
const router = new VueRouter({// 所有的路由规则routes: [{ path: '/', redirect: '/user' },{ path: '/user/:id', component: User, props: { uname: 'lisi', age: 20 } },{ path: '/register', component: Register }]
})const User = {props: ['id', 'uname', 'age'],template: '<h1>User 组件 -- 用户id为: {{id}} -- 姓名为:{{uname}} -- 年龄为：{{age}}</h1>'
}- 为props指定函数
const router = new VueRouter({// 所有的路由规则routes: [{ path: '/', redirect: '/user' },{path: '/user/:id',component: User,props: route => ({ uname: 'zs', age: 20, id: route.params.id })},{ path: '/register', component: Register }]
})const User = {props: ['id', 'uname', 'age'],template: '<h1>User 组件 -- 用户id为: {{id}} -- 姓名为:{{uname}} -- 年龄为：{{age}}</h1>'
}命名路由
为了更加方便的表示路由的路径，可以通过 name 给路由规则起一个别名，即为“命名路由”
const router = new VueRouter({// 所有的路由规则routes: [{ path: '/', redirect: '/user' },{// 命名路由name: 'user',path: '/user/:id',component: User,props: route => ({ uname: 'zs', age: 20, id: route.params.id })},{ path: '/register', component: Register }]
})编程式导航
- 参数是字符串
this.$router.push('/register')- 参数是对象
this.$router.push({ path: '/register' })- 参数是命名路由
// 'user' 是路由配置中的 name，只要 name 对了就能进行路由匹配
this.$router.push({name: 'user', params: {userId: 123}})- 带查询参数
this.$router.push({path: '/register' query: {uname: 'xxx'}})有不明白的或者有其他问题的可以评论区留言噢
私信回复JS思维导图可获取完整知识导图~
今天的知识分享就到这里啦~希望大家在这能学到知识一起分享一起进步，成为更好的自己！
![[Unity Demo]从零开始制作空洞骑士Hollow Knight第六集：制作小骑士完整的跳跃落地行为](https://i-blog.csdnimg.cn/direct/6e7912ad92324467872b2f8e8ea196f1.png)
