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

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条回答 默认 最新

      报告相同问题?

      相关推荐 更多相似问题

      问题事件

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

      悬赏问题

      • ¥15 关于#tensorflow#的问题,如何解决?
      • ¥15 VBA中使用FindWindowEx函数如何向网页表单中的多个文本框中的某一个文本框发送消息
      • ¥15 关于#glmb#的问题,如何解决?
      • ¥15 TI的TMS320F28335,RS485串口进行SCI-B通信出错
      • ¥15 XML文件报错不允许出现此特性,百度也搜不到解决方法
      • ¥15 FTPC共同交流学习
      • ¥15 关于#python##pyqt#的问题,如何解决?
      • ¥15 html+css网页设计 html+css网页设计
      • ¥15 用html加css制作一个网页
      • ¥200 MFC中如何对ListCtrl的某一列的文本能换行显示