前言
本篇讲述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思维导图可获取完整知识导图~
今天的知识分享就到这里啦~希望大家在这能学到知识一起分享一起进步，成为更好的自己！
