Vue.js监听路由变化的几种方法

By majiangping at 2020-01-11 • 0人收藏 • 55人看过

方法一:  watch

    watch:{

        $route(to,from){

                console.log(to.path);

         }

     }

或者

//当路由发生变化时,通过watch执行path方法。

   watch:{

      “$route”:"path"

    }

    methods: {

        path(){

            console.log(this.$route.pscrawl.pngath);

        }

    }


方法二:  通过vue的key属性

<router-view :key="key"></router-view>

 computed:{

     key(){

        return this.$route.name !==undefined? this.$route.name+new Data():this.$rout          e+new Data()

       }

 }


1 个回复 | 最后更新于 2020-01-13
2020-01-13   #1

我觉得还是使用命名路由比较好一些


比如说route.js中添加了一个路由

{
    path: '/login',
    name: 'Login',
    component: () => import('@/views/Login/Index')
},


如果使用

this.$router.push('/login')

或者

<router-link to="/login"></router-link>

的方式进行跳转,后期如果需要修改url,所有跳转 /login 的地方都需要修改。



如果使用

this.$router.push({name: "Login");

或者

<router-link to="{name: "Login"}"></router-link>

的方式进行跳转,只需要在 router.js 中修改一次即可。



登录后方可回帖

登 录
话题广场 查看更多
信息栏
Hello World
Loading...