Vue--Router--解决watch监听路由无效的问题
说明本文用实例介绍如何解决watch监听路由无效的问题。需求有两个组件:A和B,它们对应的path分别是:/a、/b。A组件引入B组件,并通过router-link跳转到B组件。想在A和B两个组件中打印出路由跳转的日志。.........
原文网址:Vue--Router--解决watch监听路由无效的问题_IT利刃出鞘的博客-CSDN博客
简介
说明
本文用实例介绍如何解决watch监听路由无效的问题。
需求
有两个组件:CompA和CompB,它们对应的path分别是:/compA、/compB。CompA组件引入CompB组件,并通过router-link跳转到B组件。想在CompA和CompB两个组件中打印出路由跳转的日志。
问题复现
代码
路由(router/index.js)
import Vue from 'vue'
import VueRouter from 'vue-router'
import CompA from '../components/CompA'
import CompB from '../components/CompB'
Vue.use(VueRouter)
const routes = [
{
path: '/compA',
name: 'CompA',
component: CompA
},
{
path: '/compB',
name: 'CompB',
component: CompB
}
]
const router = new VueRouter({
routes
})
export default router
A组件
<template>
<div class="outer">
<div>
这是CompA
</div>
<router-link :to="{name:'CompB'}">跳转到CompB</router-link>
</div>
</template>
<script>
export default {
name: 'CompA',
watch: {
$route: {
handler (to, from) {
console.log('组件:' + this.$options.name)
console.log('来自:' + from.name)
console.log('去往:' + to.name)
}
}
// 也可以这么写:
// $route (to, from) {
// console.log('组件:' + this.$options.name)
// console.log('来自:' + from.name)
// console.log('去往:' + to.name)
// }
}
}
</script>
<style scoped>
.outer {
margin: 20px;
border: 2px solid blue;
padding: 20px;
}
</style>
B组件
<template>
<div class="outer">
这是CompB
</div>
</template>
<script>
export default {
name: 'CompB',
watch: {
$route: {
handler (to, from) {
console.log('组件:' + this.$options.name)
console.log('来自:' + from.name)
console.log('去往:' + to.name)
}
}
}
}
</script>
<style scoped>
.outer {
margin: 20px;
border: 2px solid blue;
padding: 20px;
}
</style>
测试
访问:http://localhost:8080/#/compA
可以发现:没有打印任何路由变化的日志!
解决方案
方案1:immediate: true
watch的属性:immediate: true //一旦监听到路由的变化立即执行
代码
只修改watch部分,改为:
watch: {
$route: {
handler (to, from) {
console.log('组件:' + this.$options.name)
console.log('来自:' + from)
console.log('去往:' + to.name)
},
immediate: true
}
}
测试
访问:http://localhost:8080/#/compA
可以发现:子路由之间的跳转只能获得目的路由,无法获得来源路由。
方案2:路由包含子路由
代码
路由设置(router/index.js)
import Vue from 'vue'
import VueRouter from 'vue-router'
import Parent from '../components/Parent'
import CompA from '../components/CompA'
import CompB from '../components/CompB'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Parent',
component: Parent,
children: [
{
path: 'compA',
name: 'CompA',
component: CompA
},
{
path: 'compB',
name: 'CompB',
component: CompB
}
]
}
]
const router = new VueRouter({
routes
})
export default router
父组件(components/Parent.vue)
<template>
<div class="outer">
<div>
这是CompA
</div>
<router-link :to="{name:'CompB'}">跳转到CompB</router-link>
</div>
</template>
<script>
export default {
name: 'CompA',
watch: {
$route: {
handler (to, from) {
console.log('组件:' + this.$options.name)
console.log('来自:' + from.name)
console.log('去往:' + to.name)
}
}
}
}
</script>
<style scoped>
.outer {
margin: 20px;
border: 2px solid blue;
padding: 20px;
}
</style>
子组件(components/CompA.vue)
<template>
<div class="outer">
<div>
这是CompA
</div>
<router-link :to="{name:'CompB'}">跳转到CompB</router-link>
</div>
</template>
<script>
export default {
name: 'CompA',
watch: {
$route: {
handler (to, from) {
console.log('组件:' + this.$options.name)
console.log('来自:' + from.name)
console.log('去往:' + to.name)
}
}
}
}
</script>
<style scoped>
.outer {
margin: 20px;
border: 2px solid blue;
padding: 20px;
}
</style>
子组件(components/CompB.vue)
<template>
<div class="outer">
这是CompB
</div>
</template>
<script>
export default {
name: 'CompB',
watch: {
$route: {
handler (to, from) {
console.log('组件:' + this.$options.name)
console.log('来自:' + from.name)
console.log('去往:' + to.name)
}
}
}
}
</script>
<style scoped>
.outer {
margin: 20px;
border: 2px solid blue;
padding: 20px;
}
</style>
测试
测试1:CompA跳转CompB
访问:http://localhost:8080/#/compA
可以发现:子路由之间的跳转可以获得来源路由和目的路由。
测试2:Parent跳转CompA,CompA跳转CompB
可以发现:父=> 子、子=> 子、子=> 父,这三个之间的跳转可以获得来源路由和目的路由。
更多推荐
所有评论(0)