23.1、路由跳转
2022-04-01 12:47:34 0 举报AI智能生成
vue
作者其他创作
大纲/内容
实现路由跳转，有两大方案：
1. router-link
2.编程式导航
基于JS中的 this.$router下的方法实现路由跳转
router-link
<router-link> 最后渲染出来的是a标签
跳转方式
to 地址
to='[path]'
<router-link to='/'>
:to="{[path]/[name],传参}"
这种方式不仅能够实现跳转，还可以传递参数
传参形式
path
基于query显示传参
基于query显示传参（传递的参数信息会以问号的方式显示在URL地址中）
1. path或者name实现路由跳转都可以基于这个方式处理
2. 基于$route.query可以获取这个值，而且不论是点击传递还是页面再刷新，
只要地址栏中有问号参数，query中就可以获取到这个值
只要地址栏中有问号参数，query中就可以获取到这个值
name
基于params 隐形传惨
基于params传参是隐性传参（传递的信息不会在地址栏中体现）
1.只有基于命名路由跳转才可以使用params传参
2.进入到路由后，可以基于$route.params获取传递参数信息
3.页面一旦刷新，则传递的参数信息就没有了
动态路由
动态路由（需要在路由表中设置好）
只通过 path 方式实现
第一步：在路由表中设置 path: '/active/:id/:name', 这种格式的 path 完成提前占位
第二步：在 router-link 中传入参数即可
可根据参数不同跳转相同组件的不同操作
问题
点击多个按钮跳转到同一个路由，路由管控的组件并不会从头开始重新渲染
（也就是created/mounted等周期函数只执行一次）
触发的只是更新
解决
1、先切换到其它路由组件，路由中会默认把上一次渲染的组件销毁；
当后期重新切换回来的时候，触发当前组件的从头开始重新渲染；
但是两次连着要渲染一个组件，那么组件不会被销毁
2、watch 监听路由改变
编程式导航
基于JS中的 this.$router下的方法实现路由跳转
定义
通过JS实现路由的跳转和传参
相当于把 router-link 中的规则转移到JS中，利用JS实现
实现跳转的方式
push
类似于 <router-link to="">
用法基本相同
go
路由池
每一次的路由跳转都会记录在路由池中
go(-1)：在路由池中找到上一次的路由地址，并跳转到这个地址
go(1)：在路由池中找到下一次的路由地址，并跳转
back
与 go(-1) 效果相同
例
0 条评论
下一页
