watch一个路由对象this.$route
·
例子1:
https://github.com/PanJiaChen/vue-element-admin/blob/master/src/views/login/index.vue
watch: {
$route: {
handler: function(route) {
const query = route.query
if (query) {
this.redirect = query.redirect //
//
//
this.otherQuery = this.getOtherQuery(query)
}
},
immediate: true
}
},
上面的代码中,query是vue router的路由对象属性,redirect 是路由的重定向属性,为 vud-element-admin 的路由配置项:“在面包屑中点击会重定向去的地址”。
Vue-element-admin 官方文档中,panjiachen对上述代码的解说
在用 spa(单页面应用) 这种开发模式的之前,用户每次点击侧边栏都会重新请求这个页面,用户渐渐养成了点击侧边栏当前路由来刷新 view 的习惯。但现在 spa 就不一样了,用户点击当前高亮的路由并不会刷新 view,因为 vue-router 会拦截你的路由,它判断你的 url 并没有任何变化,所以它不会触发任何钩子或者是 view 的变化。
…
我本人在公司项目中,现在采取的方案是判断当前点击的菜单路由和当前的路由是否一致,但一致的时候,会先跳转到一个专门 Redirect 的页面,它会将路由重定向到我想去的页面,这样就起到了刷新的效果了。
例子2:
<template>
<div>
{{routerInfo}}
</div>
</template>
<script>
export default {
computed: {
routerInfo() {
const { fullPath, path, name, params, query, meta } = this.$route
return {
fullPath, path, name, params, query, meta
}
}
}
}
</script>
官方参考
https://router.vuejs.org/zh/api/#路由对象属性
https://router.vuejs.org/zh/api/#注入的属性
this.$route
当前激活的路由信息对象。这个属性是只读的,里面的属性是 immutable (不可变) 的,不过你可以 watch (监测变化) 它。
更多推荐
已为社区贡献2条内容
所有评论(0)