6.vue-router

孟英光

2023-12-01

1. 基本使用

一个路径对应一个组件；路由就是一组key-value的对应关系（路径和组件的对应关系）

1.1. 初始化

npm i vue-router //是个插件
import VueRouter from ‘vue-router’
Vue.use(VueRouter)
import router from ‘./router’ ，然后在new Vue里面添加一个配置项router
在src文件夹里新建一个router文件夹，下建一个index.js文件 //类似vuex的store

1.2. index.js

import VueRouter from 'vue-router'
import About from '../components/About'  //记得引入组件
const router = new VueRouter({
    routes:[
        {
            path:'/about',
            component:About
        },
    ]})
export default router

1.3. router-link

用于替代a标签，实现路径的更改（路由的切换）

<router-link to="/about">切换</router-link> //一样可以在里面写class添加样式

1.4. router-view

该标签用于指定组件的呈现位置

2. 几个注意点

将路由组件放在pages文件夹下（和components同级），用于和一般组件区分
组件的切换默认是将隐藏了的组件销毁，需要的时候再去挂载
路由组件会多两个属性，分别是route和router，route各不相同，但router是同一个，router是整个VueRouter实例对象

3. 嵌套(多级)路由

在routers的某一个路由里添加一个属性children:[ {},{} ] //与path,component同级，且里面的路径不需要再加/
router-link里面的to="/home/news" 得加上上级路径，即完整路径

4. 命名路由

给路由命名：在route对象里面添加一个配置name:‘hello’, 和path同级
简化跳转：:to="{name:'hello'}" //不需要再写完整的路径，对于对象写法就直接替代path

5. 路由传参

5.1. query参数

to的字符串写法

:to="'/home/message/detail?id=${m.id}&title=${m.title}'" //注意是反引号``
to的对象写法

:to="{ path:'/home/message/detail', query:{id:m.id, title:m.title} }"
接收使用：$route.query.id

5.2. params参数

:to="'/home/message/detail/${m.id}/${m.title}'"

需在对应的path里面写path:’/home/message/detail/:id/:title’ //注意冒号在前，表示占位符

对象形式只允许写name，不能写 path

5.3. props配置

在route对象里添加一个配置props，将他写成函数：

props($route){
    return { id:$route.query.id, title:$route.query.title }
}  //这样就可以把所有参数以props的方式传给子组件，简化代码（子组件可以不用再加前缀$route.query.id),而可以直接写id，记得用props:[]接收

6. replace属性

是用在router-link标签里的一个属性，表示浏览器历史记录的写入方式为replace，

即替换当前记录：将当前记录销毁，换成点击之后的路径

浏览器默认写入方式为push，在栈里面追加一个记录，浏览器的后退按钮会将指针下移，前进按钮上移

7. 编程式路由导航

不借助router-link实现路由跳转，让路由跳转更加灵活

this.$router.push({ path:’’ , query:{} }) //push方式跳转，注意是router

this.$router.replace({}) //replace方式跳转

this.$router.back() //回退，浏览器后退到前一个路由地址

this.$router.forward() //浏览器前进

this.$router.go() //传入一个数字，正数表示前进多少步，负数表示后退

8. 路由完善

8.1. 缓存路由组件

让不展示的路由组件保持挂载，不被销毁

切换路由组件的时候默认会销毁之前的组件，而若不想销毁（有时候用于保存用户输入），即缓存该组件，则只需在对应位置用此标签包裹：

<keep-alive include="News"><router-view></router-view></keep-alive>

include表示选择哪个组件进行缓存(多个写成数组)，使用的是组件名，不写则所有组件都不销毁

8.2. 两个新的生命周期钩子

路由组件独有的生命周期钩子，用于捕获路由组件的激活状态

activated(){} //激活（展现这个组件就是激活）

deactivated(){} //失活，在这里面可以把定时器停掉，防止组件缓存导致beforeDestroy不调用

8.3. 路由守卫

用于设定访问权限；to,from是对应路由的route属性，next是个函数，调用next()表示跳转,没调用就不跳

全局前置路由守卫(写在index.js里，与const router同级)

router.beforeEach((to,from,next)=>{}) //每一次路由切换之前被调用，以及初始化时

在路由里面添加一个配置项meta(路由元信息)，里面可以写任何属性，添加一个inAuth属性用于判断是否需要鉴权
全局后置路由守卫

router.afterEach((to,from)=>{}) //每一次路由切换之后以及初始化时被调用，没有next
独享路由守卫（写在单个route对象里面）

添加一个配置：beforeEnter: (to,from,next)=>{} //只用于该组件
组件内路由守卫（写在组件里面，与name,data等平级）
- beforeRouteEnter(to,from,next){} //通过路由规则，进入该组件时被调用
- beforeRouteLeave //通过路由规则，离开该组件时被调用

8.4. 路由器工作模式

hash：路径有/#，且后面的内容不发送给服务器，兼容性比较好；#及其后面的内容就是hash值

history：没有/#，所有内容都会发送给服务器，刷新可能会出问题（需后端人员解决），比较简洁

打包：npm run build