相关理解
vue-router
理解
vue的一个插件库，专门用来实现SPA应用。
对SPA应用的理解
- 单个Web应用(single page web application, SPA)。
- 整个应用只有一个完整的页面。
- 点击页面中的导航链接不会刷新页面，只会做页面的局部更新。
- 数据需要通过
ajax请求获取。
路由的理解
什么是路由？
- 一个路由就是一组映射关系
(key——value)。 key为路径，value可能是function或者component。
路由分类
后端路由
理解
value是function，用于处理客户端提交的请求。
工作过程
服务器接收到一个请求时，根据请求路径找到匹配的函数类来处理请求，返回响应数据。
前端路由
理解
value是component，用于展示页面内容。
工作过程
当浏览器的路径发生改变时，对应的组件就会显示。
基本路由
基本使用
1. 安装
安装vue-router: npm i vue-router@3
ps: vue-router3只能在vue2中使用，vue-router4在vue3中使用。
2. 应用插件
在main.js里应用插件：
//引入路由
import VueRouter from 'vue-router'
//使用路由
Vue.use(VueRouter)
3. 编写router配置项
创建src/router/index.js
//该文件用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import Home from '../components/Home'
import About from '../components/About'
//创建并暴露一个路由器
export default new VueRouter({
routes: [
{
path: '/Home',
component: Home
},
{
path: '/About',
component: About
}
]
})
4. 使用路由器
在main.js里使用路由器
//引入路由器
import router from './router'
...
// 创建Vue实例对象
new Vue({
render: h => h(App),
router//使用路由器
}).$mount('#app')
5. 实现切换
active-class可以配置高亮样式：
<router-link active-class="active" to="/about">About</router-link>
<router-link active-class="active" to="/home">Home</router-link>
6. 指定展示位置
<router-view></router-view>
注意
- 路由组件通常存放在
pages文件夹，一般组件通常放在components文件夹。 - 通过切换，隐藏了路由组件，默认是被销毁的，需要的时候再去挂载。
- 每个组件都有自己的
$route属性，里面存储着自己的路由信息。 - 整个应用只有一个
router，可以通过组件的$router属性获取到。
多级路由
配置
配置路由规则，使用children配置项
routes: [
{
path: '/Home',
component: Home,
children: [//通过children配置子级路由
{
path: 'news', //路由匹配子级时会自动加/，所以这里不能写/news
component: News
},
{
path: 'message',
component: Message
}
]
}
]
跳转
<!-- to一定要带上父级路径 -->
<router-link to="/home/news" >News</router-link>
路由的query参数
使用
- 传递参数
<!-- 跳转路由并携带query参数，to的字符串写法 -->
<!-- 加:会将""的内容当js模板字符串``去解析，传js变量用${} -->
<router-link :to="`/home/message/detail?id=${item.id}&title=${item.title}`">{{ item.title }}</router-link>
<!-- 对象写法（推荐） -->
<router-link
:to="{
path: '/home/message/detail',
query: {
id: item.id,
title: item.title
}
}">
{{ item.title }}
</router-link>
- 接收参数
$route.query.id
$route.query.title
命名路由
作用
在某些情况可以简化路由跳转的代码。
使用
- 给路由命名
{
path: 'home',
component: Home,
children: [
path: 'message',
component: Message,
children: [
{
name: 'Detail',//给路由命名
path: 'Detail',
component: Detail
}
]
]
}
- 简化跳转
<!-- 简化前需要写完整路径 -->
<router-link to="/home/message/detail">跳转</router-link>
<!-- 简化后，直接通过名字跳转 -->
<router-link :to="{name: 'detail'}">跳转</router-link>
<!-- 简化写法配合传递参数 -->
<router-link
:to="{
name: 'detail',
query: {
id: 666,
title: 'hello'
}
}"
></router-link>
路由的params参数
使用
- 配置路由，声明接收params参数
{
path: '/Home',
component: Home,
children: [
{
path: 'news',
component: News
},
{
path: 'message',
component: Message,
children: [
{
name: 'Detail',
path: 'Detail/:id/:title', //:xxx占位符，用于parmas传参
component: Detail
}
]
}
]
}
- 传递参数
<!-- 跳转路由并携带params参数，to的字符串写法 -->
<router-link :to="`/home/message/detail/${item.id}/${item.title}`">{{ item.title }}</router-link>
<!-- 跳转路由并携带params参数，to的字符串写法 -->
<!-- !!!!!!! params必须使用name跳转路由，不能使用path !!!!!! -->
<router-link
:to="{
name: 'Detail',
params: {
id: item.id,
title: item.title
}
}"
>
{{ item.title }}
</router-link>
路由的props配置
作用： 让路由组件更方便的收到参数。
- 第一种写法
//
//值为对象，该对象中所有key-value都会以props的形式传给Detail组件
props: {
a: 1,b: 'hello'
}
- 第二种写法
//值为布尔值，若布尔值为真，就会把该路由组件收到的pramas参数以props的形式传给Detail组件
props: true
- 第三种写法
//值为函数，该函数返回的对象种每一组key-value都会通过props传给Detail组件
props($route) {
return {
id: $route.query.id,
title: $route.query.title
}
}
router-link的replace属性
作用
控制路由跳转时操作浏览器历史记录的模式。
浏览器的历史有两种写入方式：
push：追加记录。replace：替换当前记录（不是所有记录，而是当前记录）。
路由跳转默认为push。
使用
<!-- 完整写法是replace="true"，但是replace的默认值就是true，所以可以直接只写一个replace -->w
<router-link replace ...></router-link>
编程式路由导航
作用
不借助<router-link>实现路由跳转，让路由跳转更加灵活
使用
//push方法跳转
this.$router.push({
name: 'Detail',
query: {
id: item.id,
title: item.title
}
})
//replace方法跳转
this.$router.replace({
name: 'Detail',
query: {
id: item.id,
title: item.title
}
})
//前进
this.$router.forward()
//后退
this.$router.back()
//前进n步
this.$router.go(n)
缓存路由组件
作用
让不展示的路由组件保持挂载，不被销毁。
使用
- 缓存一个路由组件
<!-- 不写include则所有该组件的路由都会被缓存 -->
<!-- 要写组件名！而不是路由名 -->
<keep-alive include="News">
<router-view></router-view>
</keep-alive>
- 缓存多个路由组件
<keep-alive :include="['News', 'Message']">
<router-view></router-view>
</keep-alive>
两个新的生命周期钩子
作用
路由组件所独有的两个钩子，用于捕获路由组件的激活状态。
使用
activated(){...},//路由组件被激活时调用
deactivated(){...}//路由组件失活时调用
路由守卫
作用
对所有路由进行权限控制。
分类
- 全局守卫
- 独享守卫
- 组件内守卫
全局路由守卫
全局前置守卫
初始化时和每次路由切换之前执行。
// to目的地， from始发地， next到达执行
//必须执行next()才能实现路由跳转
router.beforeEach((to, from, next) => {
console.log('前置',to, from);
if(to.meta.isAuth) {//判断是否需要鉴定权限
if(localStorage.getItem('school') === 'cloud') {
next()//放行
}else {
alert('学校名称不对，无权查看')
}
}else {
next()//放行
}
})
全局后置守卫
路由切换之后执行。
router.afterEach((to, from) => {
console.log('后置',to, from);
//默认title是cloud，路由跳转后根据路由相应的title更改
document.title = to.meta.title || 'cloud'//修改网页的title
})
独享路由守卫
作用
对某个路由进行权限控制。
只有独享前置守卫，没有独享后置守卫，可以与全局后置守卫配合使用。
beforeEnter(to, from, next) {
console.log('独享', to, from);
if (to.meta.isAuth) {//判断是否需要鉴定权限
if (localStorage.getItem('school') === 'cloud') {
next()
}
else alert('学校名称不对，无权查看')
}
else next()
}
组件内路由守卫
- 通过路由规则，进入该组件时调用。
beforeRouteEnter(to, from, next) {...}
- 通过路由规则，离开该组件时调用。
beforeRouteLeave(to, from, next) {...}
路由器的两种工作模式
对于一个url来说，什么是hash值？
#后面的内容就是hash值。
hash值不会包含在HTTP请求当中，即： hash值不会带给服务器。
hash模式
- 地址中永远带着
#号，不美观。 - 若以后将地址通过第三方手机APP分享，若APP校验严格，则地址会被标记为不合法。
- 兼容性较好。（But IE已死）
history模式
- 地址干净、美观。
- 兼容性比起hash略差。
- 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。
修改模式
修改模式在路由配置中添加mode属性，默认值是hash。
mode: 'history'