【vue其他相关】路由相关方案：如何统一给所有路由加上参数、参数改变后如何触发组件切换

如何统一给所有路由加上参数

问题场景

可能有些情况，我们需要路由从上游链带参数一直传下去，所以全局的路由需要动态自动添加固定参数。

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，这样每次路由一有变化，整个组件都会销毁重建，但太暴力了性能上不是最优解。