Vue使用watch监听路由的变化

最新推荐文章于 2025-06-20 09:49:04 发布

原创最新推荐文章于 2025-06-20 09:49:04 发布 · 3.7w 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#watch #$route.path

Vue 专栏收录该内容

35 篇文章

订阅专栏

本文介绍如何使用Vue的watch特性监听路由变化，通过监听$route.path属性，实现不同路由路径的个性化欢迎信息显示。示例代码展示了从登录到注册页面的跳转及相应事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

watch除了可以监听data中数据的变化，还可以监听路由的变化。监听 $route.path属性

 watch:{
      '$route.path':function(newVal,oldVal){
        //console.log(newVal+"---"+oldVal);
        if(newVal === '/login'){
          console.log('欢迎进入登录页面');
        } else if(newVal === '/register'){
          console.log('欢迎进入注册页面');
        }
      }
 }

完整代码如下：

<html>
  <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  </head>
<body>
  <div id='app'>
    <router-link to="/login">登录</router-link>
    <router-link to="/register">注册</router-link>
    <router-view></router-view>
  </div>
</body>
<script src="../lib/vue.js"></script>
<script src="../lib/vue-router-3.0.1.js"></script>
<script>
  var login = {
    template:'<h3>这是登录子组件，这个组件是奔波开发的</h3>'
  }
  var register = {
    template:'<h3>这是注册子组件，这个组件是霸波奔开发的</h3>'
  }
  var router = new VueRouter({
    routes:[
      {path:"/",redirect:'/login'},
      {path:'/login',component:login},
      {path:'/register',component:register}
    ]
  })
  var vm = new Vue({
    el:'#app',
    data:{
    },
    methods:{
    },
    router,
    watch:{
      // this.$route.path
      '$route.path':function(newVal,oldVal){
        //console.log(newVal+"---"+oldVal);
        if(newVal === '/login'){
          console.log('欢迎进入登录页面');
        } else if(newVal === '/register'){
          console.log('欢迎进入注册页面');
        }
      }
    }
  })
</script>
</html>