在具有以下代码的单页应用程序中使用 vue-router,watch $route 函数在重定向到 mycomponent 时不会触发。
此外,mycomponent 中的 beforeRouteUpdate 也未触发。
如何检测在组件加载期间变量何时被标记到路由?
App.vue
<template>
<router-view></router-view>
</template>
<script>
import Vue from 'vue'
export default {
name: 'app'
}
</script>
索引.js
import Vue from 'vue'
import Router from 'vue-router'
import MyView from '@/views/MyView'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
redirect: '/home',
name: 'Home',
children: [
{
path: '/mycomponent',
name: 'MyComponent',
component: MyComponentView
},
{
path: '/mycomponent/:id',
component: MyComponentView,
props: true
}
]}]})
我的组件.vue
<template>
<component :is="activeComponent" :id="id"></component>
</template>
<script>
export default {
name: 'MyComponentView',
components: {
...
},
mounted: function() {
#this logs path in browser
console.log('>>mounted route: ' + this.$route.path)
},
watch: {
'$route': function () {
#this does not fire
console.log('route watcher: ' + this.$route.path)
}
},
beforeRouteUpdate (to, from, next) {
#this does not fire
console.log('>>beforeRouteUpdate')
},
data () {
return {
activeComponent: 'somecomponent'
}
}
}
</script>
component1.vue
...
mounted: function() {
Event.$on('vue-tables.row-click', function(data) {
#this logs correct information in browser
console.log('data.row.id: ' + data.row.id)
router.push({path: 'mycomponent', query: {id: data.row.id}})
})
},
...
最佳答案
它不起作用,因为 beforeRouteUpdate
位于将要重新加载的组件中(查看 Vue 的生命周期)。当您更改路线时,watch
和 beforeRouteUpdate
将终止,您将看不到任何结果。在这种情况下,您应该提供如下内容:
MainRouterView.vue
<template>
<router-view/>
</template>
<script>
name: 'MainRouterView',
beforeRouteUpdate (to, from, next) {
console.log('beforeRouteUpdate')
},
</script>
路由器.js
export default new Router({
routes: [
{
{
path: '/mycomponent',
name: 'MainRouterView',
component: MainRouterView,
children: [
{
path: '/mycomponent/:id',
component: SecondComponent,
}
]
},
}]})
但是如果你想坚持你的结构并检查当前路由的状态,你可以将 beforeRouteUpdate
替换为 beforeRouteEnter
或 beforeRouteLeave
在组件中。您也可以在路由器中使用全局守卫 beforeEach
。
为了更好地理解 beforeRouteUpdate
的工作原理,请查看以下代码片段:http://jsfiddle.net/yraqs4cb/
关于vue.js - vue-router 既不监视路由也不监视导航守卫开火,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48603905/