精华内容
下载资源
问答
  • vue 监听路由变化

    2021-01-11 11:17:04
    // 监听,当路由发生变化的时候执行 watch:{ $route(to,from){ console.log(to.path); } }, =========================================================== // 监听,当路由发生变化的时候执行 watch: { $route: {...

    一.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

    展开全文
  • Vue 组件中监听路由变化

    千次阅读 2018-09-12 08:42:35
    版权声明:本文首发 http://asing1elife.com ,转载请注明出处。 https://blog.csdn.net/asing1elife/article/details/82620124 Vue 组件中监听路由变化 ...
    版权声明:本文首发 http://asing1elife.com ,转载请注明出处。 https://blog.csdn.net/asing1elife/article/details/82620124

    Vue 组件中监听路由变化

    在 Vue 的组件中可以通过 watch 监听到当前路由的变化

    更多精彩

    实现方式

    1. watch 按照如下规则书写即可
    2. 该监听会在路由发生变化时触发
    watch: {
        '$route' (val, old) {
            // 当前路由
            console.log(val)
            // 上一个路由
            console.log(old)
        }
    }
    展开全文
  • Vue 监听路由变化

    千次阅读 2019-03-05 18:28:41
    Vue.js 官方文档中提供了导航完成后获取数据 和在导航完成前获取数据两种方法,我个人使用的是前者,这个需要小伙伴们自己按照需求来定。文档地址 现在着重说一下导航完成后获取数据中的不同的写法: 第一种 ...

    Vue.js 官方文档中提供了 导航完成后获取数据 和 在导航完成前获取数据 两种方法,我个人使用的是前者,这个需要小伙伴们自己按照需求来定。文档地址

    现在着重说一下 导航完成后获取数据 中的不同的写法:

    第一种

    watch: {
       $route:{
          handler(val, oldVal){
             let that = this;
             console.log(val,'监控路由变化');
             if(val.name === '你的router配置的name值'){
                //在这里做你要做的事
             }
          },
          deep:true //深度监听
       }
    }

    或者

    watch: {
       '$route':'getPath'
    },
    methods: {
       getPath(){
           console.log(this.$route.path);
           //你的逻辑代码或数据请求
       }
    },

    以上的这两种写法 只是单纯的去监听你的 router 的变化 也就是你 router 配置的 path 的变化。

    实用场景:A页面通过 router-link 跳转B页面,通过 to="{name:' ',params:{}}" 传递参数,在B页面拿到你所传过来的参数后,路由发生变化,监听捕获数据,然后执行你你逻辑代码。

    内容提升及补充:Vue Router 中的 在导航完成前获取数据 还提供了 beforeRouteEnter  beforeRouteUpdate 两个钩子函数

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

    其中 beforeRouteEnter 当数据获取成功后只调用  next  方法。( 官文原话 )

     

    ---------------------------------------------------------------   END   ------------------------------------------------------------------

    珍惜眼前人,莫要失去才懂珍惜~~~

    展开全文
  • Vue监听路由变化

    千次阅读 2020-04-20 16:52:49
    一加载进来在mounted中获取初始值,之后在watch中监听变化。 mounted:function(){ var _this = this; //一加载进来,或者刷新页面时,根据路径显示面包屑导航 var hash = _this.$route.path; var hashArr = ...
    1. watch监听:
      1. 监听一级路由:路由组件的渲染区域为router-view,作为顶层出口,它将匹配到的路由组件渲染在该区域中,路由组件渲染默认的方式是销毁 - 创建,因此$watch是监听不到一级路由的变化的。所以,要想使用$router监听一级路由,需要让组件成为复用组件,也就是使用keep-alive包裹router-view
        <keep-alive>
             <router-view />
        </keep-alive>
        
        watch: {
              $route: {
                  handler(to,from) {
                       if(from && (from.name === 'adoptSelect')){
                            this.active = 2
                        }
                  },
                  deep:true,
                  immediate: true
              }
         }
        
      2. 监听子路由:需要在有子路由的情况下,才能在当前组件监听到子组件的路由变化,直接使用下面的方式即可。
        watch: {
             $route(to,from){	     
              		...
             }
         }
        
    2. 路由导航守卫:
      //不能获取组件实例 `this`,因为当守卫执行前,组件实例还没被创建
      beforeRouteEnter(to,from,next){
            if(from.name !== 'adoptDetail'){
                next({
                    path:'/adopt'
                })
            }else{
                next()
            }
      }
      
    展开全文
  • vue监听路由变化的几种方式【Vue】

    千次阅读 2020-07-27 16:33:28
    vue页面开发中,我们经常需要根据路由变化去实现一些操作,那么如何监听路由变化呢?当然是利用vue中的 watch ,请看代码。 一、监听路由从哪儿来到哪儿去 在这里插入代码片
  • vue watch监听路由变化

    2020-12-05 20:24:20
    vue日常使用中watch常用来监听数据的变化,今天也是由一些问题用到了监听路由的转换。 watch: { '$route.path': { immediate: true, handler: function (newVal, oldVal) { this.activePath = newVal } } }...
  • vue页面监听路由变化

    2021-07-21 14:07:51
    // 监听,当路由发生变化的时候执行 watch:{ $route(to,from){ console.log(to.path); // // 这种可能拿不到this, } }, 或者 // 监听,当路由发生变化的时候执行 watch: { $route: { handler: function(val, ...
  • vue监听路由参数变化

    2019-04-25 17:18:00
    问题来源:项目中突然发现同一路由参数变化页面中一系列的生命周期函数一动动,这样我怎么渲染页面?难道让我刷新页面,对于这个小学二年级水平的操作,我表示拒绝。 解决办法:在vue项目中一说监听改变数据。...
  • vue路由监听不到怎么办?

    千次阅读 2020-06-20 18:10:20
    vue有时候监听不到路由变化怎么办?最近在使用vue项目的时候发现我们使用的watch监听不到$route的变化,查了很多文档最终终于找到解决办法。方法一:路由包含子路由方法二:监听$route.path对象方法三:使用vue自带...
  • beforeRouteEnter (to, from, next) { ... // !能!获取组件实例 `this` // 因为当钩子执行前,组件实例还没被创建 }, beforeRouteUpdate (to, from, next) { // 在当前路由改变,但是...
  • vue监听路由参数变化

    千次阅读 2019-01-05 16:16:00
    vue监听路由参数变化 今天遇到一个这样的业务场景:在同一个路由下,只改变路由后面的参数值, 比如在这个页面 /aaa?id=1 ,在这个页面中点击一个按钮后 跳转 /aaa?id=2 , 但从“/aaa?id=1...
  • watch在父子路由间不会出现监听不到路由变化这种情况; 3. 监听不到是因为组件被销毁了,解决这种方法是在router-view外面 加一层标签keep-alive标签; 5. keep-alive存在的意义就是使组件不被销毁; <keep-...
  • //方案一:监听,当路由发生变化的时候执行 watch:{ //最普通的写法 $route(to,from){ console.log(to.path); } }, //方案二:监听,当路由发生变化的时候执行 watch: { $route: { handler: function(val, oldVal...
  • 例: 地址1:... ... 问题现象:当从第一个调第二个地址时,页面内容进行刷新,依然停留在地址1的内容,但是地址栏会变化为地址二。 解决方式:vue 的key htt...
  • 2、遇到的问题:一级路由菜单的话,点击当前路由会自动在路由标签上添加router-link-exact-active和router-link-active样式。因此针对一级路由只需要改写活跃状态下的css样式即可。但是在下拉菜单中,无法通过点击子...
  • vue项目中,假使我们在同一个路由下,只是改变路由后面的参数值,期望达到数据的更新。 mounted: () =>{ this.id = this.$route.query.id; this.initData() } initData()方法中会用到this.id这个参数,在...
  • 之前我也遇到过这样的问题,监听路由时... immediate: true, // 监听到路由变化立即执行 handler(to, from) { // 这里是监听路由后要做的事情 console.log('这里是你监听路由后要做的事情'); }, }, } ...
  • vue监听路由

    2019-03-17 18:58:22
    watch:{ ... //侧边栏能进行高亮变动,所以需要监听路由变化,将当前类的变动的类i名加入组件 this.activeClass = to.path.slice(1) } } 第二种监听方式, watch:{ $route:{ deep:true, ...
  • tab)去获取对应数据,然后渲染页面(用的是同一套组件),问题来了:当切换Tab时,数据并没有更新,后来看了Vue-router官网,有这么一句话:提醒一下,当使用路由参数时,例如从 /user/foo 导航 user/bar,...
  • 那么路由发生变化,但是页面上面的数据不会发生变化 新建one.vue 组件 作为home的子组件,在home.vue 中写遍历渲染页面 ,并用params传参, one中 因为created只执行了一次,就接收都第一次传的值,所以需要监听...
  • vue 中怎么监听路由变化

    千次阅读 2019-01-24 11:27:49
    console.log("路由变化了") this.$router.replace({path: '/home'}); //replace替换原路由,作用是避免回退死循环 } }, vue-router 路由原理 在解析源码前,先来了解下前端路由的实现原理。 前端路由实现...
  • 大概有两种说法:从路由的用途上来解释路由就是指随着浏览器地址栏的变化,展示给用户的页面也相同。从路由的实现原理上来解释路由就是URL函数的映射。vue-router是什么Vue Router 是 Vue.js 官方的路...
  • 监听路由变化改变tabber的值。watch: { $route () { console.log('改变路由') this.selected = sessionStorage.getItem('pageUrl') }, selected: function (val, oldVal) { // 这里就可以通过
  • vue项目中,一个可行的路由规则很重要,它决定着用户是否有权限...const whiteList = ['/login'] // 路由白名单,需要登录的路由放在这里面 router.beforeEach((to,from,next) =&gt; { // 监听路由刷新进行...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 18,538
精华内容 7,415
关键字:

vue监听不到路由变化

vue 订阅