【vue其他相关】路由相关方案:如何统一给所有路由加上参数、参数改变后如何触发组件切换
文章目录问题场景beforeEach全局守卫底层函数劫持问题场景可能有些情况,我们需要路由从上游链带参数一直传下去,所以全局的路由需要动态自动添加固定参数。beforeEach全局守卫const query = { id: ‘1’ } //这是全局需携带的参数router.beforeEach((to,from,next)=>{to.query.id ? next() : next({…to
·
文章目录
如何统一给所有路由加上参数
问题场景
可能有些情况,我们需要路由从上游链带参数一直传下去,所以全局的路由需要动态自动添加固定参数。
beforeEach全局守卫
const query = { id: '1', name: 'admin' } //这是全局需携带的参数
router.beforeEach((to, from, next) => {
// to.query = { ...to.query, ...query } 注意不能这样直接整个赋值query,会报错
let arr = Object.keys(query) // 获取须带参数对象的所有key
for (let i = 0; i < arr.length; i++) {
if (!to.query[arr[i]]) to.query[arr[i]] = query[arr[i]] // 没有带上的就赋值带上
}
next()
})
这个方法的缺点是,url不会及时的更新query的参数。
底层函数劫持
这种方法比较危险,我们会修改底层的router.history.transitionTo
方法。
const query = { id: '1', name: 'admin' } //这是全局需携带的参数
// 修改底层方法
const transitionTo = router.history.transitionTo // 临时存储底层方法
router.history.transitionTo = function(location, onComplete, onAbort) {
location = typeof location === 'object' ? { ...location, query: { ...location.query, ...query }} : { path: location, query }
transitionTo.call(router.history, location, onComplete, onAbort)
}
两个方案都测试过了,可用。
参数改变后如何触发组件切换
问题场景
假如我们的某个路由地址配了动态参数,就像下面
const routes = [
{
path: '/detail/:id',
name: 'detail',
component: Detail
}
]
这种情况修改了动态参数是不会触发底层的路由捕获事件的,我在书上找到了几个解决方案。
beforeRouteUpdate路由守卫
这个钩子函数能监听到组件的动态参数发生变化,我这篇博客有写。
在这里面就可以重新请求数据,更新渲染视图层了。推荐!
$route对象的监听
用watch监听的时候要考虑性能,尽量提升监听的精度,例子中:
// 从detail?id=1&page1到detail?id=1&page2,我们只需要监听page这个字段
watch: {
'$route.query.page'(){
}
}
暴力销毁并新建router-view
我们知道vue在底层用key来判断新旧DOM节点是否相同,如果我们这样:
<router-view :key='$route.fullPath'></router-view>
把整个路由地址作为key,这样每次路由一有变化,整个组件都会销毁重建,但太暴力了性能上不是最优解。
更多推荐
已为社区贡献5条内容
所有评论(0)