水果味的胖子 2022-01-05 15:23 采纳率: 100%
浏览 167
已结题

vue用watch监听路由的时候遇到的问题

router.js代码

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
    children: [
      {
        path: "/about",
        name: "About",
        component: () =>
          import( "../views/About.vue"),
      },
      {
        path: "/other",
        name: "Other",
        component: () =>
          import("../views/Other.vue"),
      }
    ],
  },
];

about.vue代码和other代码差不多就是名字改了

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  watch:{
    $route:function(to,from){
      console.log('about路由变化',to,from);
    }
  }
};
</script>

home.vue代码

<template>
  <div id="nav">
      <router-link :to="{path:'/about',query:{id:'123'}}">About</router-link>
      <router-link to="/other">Other</router-link>
      <router-view/>
  </div>
</template>
<script>
export default {
  name: 'Home',
  watch:{
    $route(){
      console.log('home路由变化');
    }
  }
}
</script>
运行结果及报错内容

点两个按钮去切换about和other路由无法输出是相应的路由变化,只会输出 home路由的变化

我想要达到的结果

在进入相应的页面的时候通过watch能监听到相应的路由变化 ,比如进入about会输出我上面写的about路由变化。就用watch监听
$route,不用组件内守卫

  • 写回答

2条回答 默认 最新

  • 归来巨星 前端领域新星创作者 2022-01-05 15:32
    关注

    路由组件的渲染区域为 router-view,作为顶层出口(官方是这么叫的)它将匹配到的路由组件渲染在该区域中。所以就是需要有子路由才可以监听到!

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(1条)

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 1月9日
  • 已采纳回答 1月5日
  • 创建了问题 1月5日

悬赏问题

  • ¥15 HC32L176调试了一个通过TIMER5+DMA驱动WS2812B
  • ¥15 三菱FX系列PLC串口指令
  • ¥15 cocos的js代码调用wx.createUseInfoButton问题!
  • ¥15 关于自相关函数法和周期图法实现对随机信号的功率谱估计的matlab程序运行的问题,请各位专家解答!
  • ¥15 Python程序,深度学习,有偿私
  • ¥15 扫描枪扫条形码出现问题
  • ¥35 poi合并多个word成一个新word,原word中横版没了.
  • ¥15 【火车头采集器】搜狐娱乐这种列表页网址,怎么采集?
  • ¥15 求MCSCANX 帮助
  • ¥15 机器学习训练相关模型