首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >watch监听函数小案例

watch监听函数小案例

原创
作者头像
ZEHAN
修改2021-06-15 11:26:17
4600
修改2021-06-15 11:26:17
举报
文章被收录于专栏:前端开发ZEHAN前端开发ZEHAN
<div id="app">
  <router-link to="/login">登录</router-link>
  <router-link to="/reg">注册</router-link>
  <router-view></router-view>
  <h3>{{msg}}</h3>
</div>
<body>
  <script>
    const login = {
      template: `<h1>登陆组件</h1>`
    }
    const reg = {
      template: `<h1>注册组件</h1>`
    }
    const router = new VueRouter({
      routes:[
        {path:'/login',component:login},
        {path:'/reg',component:reg}
      ]
    });
    let vm = new Vue({
      el: "#app",
      data() {
        return {
          msg:'欢迎登录'
        }
      },
      router,
      watch:{
        '$route.path':function(newval){
          if(newval==='/login'){
            this.msg='欢迎登录'
          }else if(newval==='/reg'){
            this.msg='欢迎注册'
          }
        }
      }
    })
  </script>
</body>

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档