vue 监听路由变化

28 篇文章 1 订阅

一.watch监听$route($router的对象)

// 监听,当路由发生变化的时候执行
watch:{
  $route(to,from){
    console.log(to.path);
  }
},
===========================================================
// 监听,当路由发生变化的时候执行
watch: {
  $route: {
    handler: function(val, oldVal){
      console.log(val);
    },
    // 深度观察监听
    deep: true
  }
},
===========================================================
// 监听,当路由发生变化的时候执行
watch: {
  '$route':'getPath'
},
methods: {
  getPath(){
    console.log(this.$route.path);
  }
}

二. vue-router 的钩子函数(写在与methods同级的地方或者router中)

beforeRouteEnter (to, from, next) {
 // 在渲染该组件的对应路由被 confirm 前调用
  // 不!能!获取组件实例 `this`
  // 因为当钩子执行前,组件实例还没被创建
},
===========================================================
beforeRouteUpdate (to, from, next) {
  // 在当前路由改变,但是该组件被复用时调用
  // 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
  // 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
  // 可以访问组件实例 `this`
},
===========================================================
beforeRouteLeave (to, from, next) {
  // 导航离开该组件的对应路由时调用
  // 可以访问组件实例 `this`
},

完整的导航解析流程

  1. 导航被触发。
  2. 在失活的组件里调用 beforeRouteLeave 守卫。
  3. 调用全局的 beforeEach 守卫。
  4. 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
  5. 在路由配置里调用 beforeEnter。
  6. 解析异步路由组件。
  7. 在被激活的组件里调用 beforeRouteEnter。
  8. 调用全局的 beforeResolve 守卫 (2.5+)。
  9. 导航被确认。
  10. 调用全局的 afterEach 钩子。
  11. 触发 DOM 更新。
  12. 调用 beforeRouteEnter 守卫中传给 next 的回调函数,创建好的组件实例会作为回调函数的参数传入。

三. 路由守卫

import Vue from "vue";
import VueRouter from "vue-router";
import store from '@/store'
Vue.use(VueRouter);

const routes = [***]

const router = new VueRouter({
  routes
});


// 设置路由守卫,在进页面之前,判断有token,才进入页面,否则返回登录页面
router.beforeEach((to, from, next) => {
  // 判断要去的路由有没有 noRequireToken
  // to.matched.some(r => r.meta.noRequireToken) or to.meta.noRequireToken
  if (to.matched.some(r => !r.meta.noRequireToken)) {
    let token = store.getters.getToken
    console.log("token:", token,to.fullPath)
    if (token) {
      next(); //有token,进行request请求,后台还会验证token
    } else {
      next({
        name: "Login", // 使用params参数不会消失,meta刷新后消失;params必须和query一起用?
        // path:"/login",
        // 将刚刚要去的路由path(却无权限)作为参数,方便登录成功后直接跳转到该路由,这要进一步在登陆页面判断
        query: { redirect: to.fullPath },
        // params: { redirect: to.fullPath },
        // meta: { redirect: to.fullPath },
      });
    }
  } else {
    next(); //如果无需token,那么随它去吧
  }
});

export default router;

组件独享守卫

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

官网介绍 vue-router

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值