失眠网 > Vue--Router--解决watch监听路由无效的问题

Vue--Router--解决watch监听路由无效的问题

时间：2023-05-14 20:35:28

原文网址：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）

子组件（components/CompB.vue）