精华内容
下载资源
问答
  • vue路由监听不到怎么办?

    千次阅读 2020-06-20 18:10:20
    vue有时候监听不到路由变化怎么办?最近在使用vue项目的时候发现我们使用的watch监听不到$route的变化,查了很多文档最终终于找到解决办法。方法一:路由包含子路由方法二:监听$route.path对象方法三:使用vue自带...

    最近在使用vue项目的时候发现我们使用的watch监听不到$route的变化,查了很多文档最终终于找到解决办法。

    方法一:路由包含子路由

    {
      name: 'home',
      component: Home,
      path: '/home',
      children: [
        {
          path: 'main',
          name: 'main',
          component: Main,
        },
        {
          path: 'login',
          name: 'login',
          component: Login,
        },
      ]
    }
    

    在几个子路由之间跳转就能保证监听到路由变化

    方法二:监听$route.path对象

    watch: {
        "$route.path":{
          handler(to, from) {
            console.log('to:::', to);
            console.log('from:::', from);
          },
          deep: true
        }
      }
    

    如果我们的路由没有子路由,想要实现监听可以使用$route.path进行深度监听,这样也能监听到路由变化了。

    方法三:使用vue自带的路由守卫beforeRouteEnter ,beforeRouteUpdate ,beforeRouteLeave

    beforeRouteEnter (to, from, next) {
        next(vm => {
        	// 通过 `vm` 访问组件实例
     	 })
      },
      beforeRouteUpdate (to, from, next) {
      },
      beforeRouteLeave (to, from, next) {
      }
    

    据说还能通过设置keep-alive来保证路由被监听到,这个我最近还没用的,有用过的小伙伴可以分享一下。

    展开全文
  • 首页列表页购物车会员中心import store from "../../store"import { mapState, mapActions } from "vuex"export default{// vue使用props动态传值给子组件里面的函数用props:['floorTitle'],data(){return{active: 0...

    首页

    列表页

    购物车

    会员中心

    import store from "../../store"

    import { mapState, mapActions } from "vuex"

    export default{

    // vue使用props动态传值给子组件里面的函数用

    props:['floorTitle'],

    data(){

    return{

    active: 0

    }

    },

    created(){

    this.changeTabActive()

    },

    watch:{  // 当数据发生改变的时候再赋值

    // floorData 监视的对象

    },

    computed: {

    ...mapState({

    items: state => store.state.shopcart.items,

    totalNumber: state => store.state.shopcart.totalNumber,

    totalMoney: state => store.state.shopcart.totalMoney,

    itemCount: state => store.state.shopcart.itemCount

    })

    },

    updated(){

    this.changeTabActive()

    },

    methods:{

    changeTabbar(active){

    console.log(active)

    switch (active) {

    case 0:

    //使用name跳转,因为路径有时候会改变,这样就需要改编程式导航,比较麻烦

    this.$router.push({name:'Main'})

    break;

    case 1:

    this.$router.push({name:'goodsList'})

    break

    case 2:

    this.$router.push({name:'cart'})

    break

    case 3:

    this.$router.push({name:'user'})

    default:

    break;

    }

    },

    changeTabActive(){

    this.nowPath=this.$route.path  //vue提供的方法

    if(this.nowPath=="/shoppingMall"){

    this.active=0

    }else if(this.nowPath=="/goodsList"){

    this.active=1

    }else if(this.nowPath=="/cart"){

    this.active=2

    }else if(this.nowPath=="/user"){

    this.active=3

    }

    }

    },

    watch:{

    '$route': 'changeTabActive'

    }

    }

    展开全文
  • 简单的两个路由,就无法监听到路由变化,不知道怎么回事var router = new VueRouter({routes: [{name: 'home',component: {template: 'test home',watch: {'$route': function(route) {// 监听不到变化?...

    简单的两个路由,就无法监听到路由变化,不知道怎么回事

    var router = new VueRouter({

    routes: [{

    name: 'home',

    component: {

    template: '

    test home
    ',

    watch: {

    '$route': function(route) {

    // 监听不到变化??

    console.log('home', route);

    }

    }

    },

    path: '/',

    }, {

    name: 'test',

    component: {

    template: '

    home test
    ',

    watch: {

    '$route': function(route) {

    // 监听不到变化??

    console.log('test', route);

    }

    }

    },

    path: '/test'

    }],

    });

    new Vue({

    el: '#app',

    router: router,

    watch: {

    '$route': function(route) {

    //可以监听到变化

    // console.log('watch', route);

    },

    }

    });

    展开全文
  • 直接上代码: ... immediate: true, // 一旦监听到路由的变化立即执行 handler(to, from) { console.log("监听路由:" + JSON.stringify(to.name)); }, }, } 这样监听路由就能解决问题! ...

    直接上代码:

      watch: {
        $route: {
          immediate: true, // 一旦监听到路由的变化立即执行
          handler(to, from) {
            console.log("监听路由:" + JSON.stringify(to.name));
          },
        },
      }
    

    这样监听路由就能解决问题!

    展开全文
  • vue监听路由

    2019-03-17 18:58:22
    watch:{ ... //侧边栏能进行高亮变动,所以需要监听路由变化,将当前类的变动的类i名加入组件 this.activeClass = to.path.slice(1) } } 第二种监听方式, watch:{ $route:{ deep:true, ...
  • vue 监听路由变化

    2020-11-03 16:45:31
    监听一级路由路由组件的渲染区域为router-view,作为顶层出口,它将匹配到的路由组件渲染在该区域中,路由组件渲染默认的方式是销毁 - 创建,因此$watch是监听不到一级路由的变化的。所以,要想使用$router监听一...
  • 例: 地址1:... ... 问题现象:当从第一个调第二个地址时,页面内容进行刷新,依然停留在地址1的内容,但是地址栏会变化为地址二。 解决方式:vue 的key htt...
  • 在'game-detail'页面执行this.$router.push()方法,跳转'game-detail',页面刷新。因为路由主体没变,变的只是传递的参数id所以从'game-detail?id=1''game-detail?id=2',并没有跳转。但是可以在watch里监听$...
  • @Watch('$route') routechange(to: any, from: any) { ...//参数相等 if (to.query.name!=from.query.name) {//todo } } 转载于:https://www.cnblogs.com/qiufang/p/11593865.html...
  • Vue路由

    2021-02-24 21:41:53
    Vue路由一、路由1.路由的发展二、js原生监听hash值的变化三、vue-router四、vue-router的使用1.js文件导入2.添加路由链接3.添加路由填充位4.创建路由组件5.配置路由规则,创建路由实例6.把路由挂载Vue根实例上五、...
  • 进入路由之前,判断进入这个用户主页是否会本人...侧边栏创建完就开始监听了,可是一直没监听到。 原因: 1111111是在发送事件的时候执行的,但是侧边栏组件还没开始创建。也就是说我没还监听,这边已经发送了。 ...
  • vue路由杂谈

    2020-10-13 20:51:24
    使用vue做单页面网站 ,路由的配置是必可少的,我们需要配置路由 使用use 注册到vue的实例里面 其实,也就是执行了install的方法,也因为这样我们可以给vue写很多插件, 路由有hash 与history 一个是带#号一个是...
  • vue路由入门

    2019-04-19 11:31:21
    SPA单页面,都定位相同的页面,切换url时,重新加载页面。监听url的变化,在变化前后执行响应的逻辑。 使用的步骤:①提供路由配置表,不同url匹配不同的组件配置 ②初始化路由实例 new VueRouter() ③挂载...
  • 因为通过动态路由切换组件时,并是重新创建实例,所以生命周期钩子只能执行一次,通过监听路由参数来监听路由变化 提醒一下,当使用路由参数时,例如从 /user/foo 导航 /user/bar,原来的组件实例会被复用。...
  • 还有的一些是具体交互的处理,那个是要根据后端的需求,来进来比较细化的工作,我在这里就说了!说了意义也不大,大家的项目的项目一样的,细化的工作肯定是一样的,然后开发的人一样,对接的工作肯定也是...
  • Vue路由原理

    2020-10-04 22:46:05
    首先他利用了浏览器对于hash这种当时进行刷新,然后通过hashchange监听hash的改变来进行dom的重新渲染,改变组件引进一个新组件 function render(){ let path=location.hash.substring(1);//拿#后的地址 let ...
  • 1.需求 : A页面携带不同的参数跳转B页面,解决B页面刷新导致接收的参数永远是第一次跳转路由所带的参数! 解决:通过监听路由,把你写在created里面的代码重新在watch在复制一份,达到页面数据的刷新。 ...
  • Vue路由的钩子函数

    2021-03-28 19:58:49
    Vue路由的钩子函数 定义:每个Vue实列在被创建时都要进行一系列的初始化,如:设置数据监听,编译模板,将实例挂载DOM并在数据变化时进行更新DOM,同时在这个过程中也会运行一些生命周期的钩子函数。 ...
  • Vue路由组件传参

    2021-03-19 16:51:37
    路由组件传参 在组件中使用 $route 会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的 URL 上使用...注意:要在组件中配置props,否则即使设置为true直接取值是取不到的 router.js路由配置 { path: '/a
  • 重点:如何做到在保存数据的同时,可以在另一个路由监听到数据的变化并且执行相应的操作。 基本步骤: 1. 封装全局监听方法:在main.js中给Vue.protorype注册全局方法。约定监听的sessionStorage的值为...
  • vue路由传值页面没有实时更新怎么解决?...在本路由里面跳转到本路由上,只要路径不发生变化,在mounted()中是监测不到的,因为mounted()在组件创建时只执行了一次, 我们需要进行路由监听: 这样通过 val.que...
  • vue路由的实现模式

    2020-08-01 19:12:53
    路由:改变url但是重新请求而刷新视图 1.hash模式 在url里面“#”后面的称为hash,用window.location.hash读取 2.history模式 history采用HTML5的新特性;且提供了两个新方法:pushState(),replaceState()...
  • 路由导航守卫,顾名思义就是像守卫 一样对路由进行监听判断,验证身份 使用路由导航守卫可以避免用户进行登陆操作而直接访问后台界面, 使用方法: 在路由文件中导出路由对象之前添加一个导航守卫,有三个参数,分别是...
  • 文章目录 最近在开发中涉及到 路由切换监听时想要触发组件值更新的问题,特此记录: 总所周知,在路由切换中,只有...只要是组件复用都会涉及触发不到created、mounted的问题 废话不多说,上代码: watch: { '
  • 1.废话多说直接上代码 ,即复制即用 ... 1.1需要注意的是 要放 mounted 里面 不要放 created 原因的话 去看 vue 的生命周期钩子 data() { return { _page: '', _rights: [], screenHeight: ...
  • vue路由模式为history的时候,刷新页面会出现404问题。我们只需要在服务器配置如果URL匹配不到任何静态资源,就跳转到默认的index.html。 server { listen 8105; // 表示你nginx监听的端口号 root /home/admin/...

空空如也

空空如也

1 2 3 4 5 ... 9
收藏数 170
精华内容 68
关键字:

vue路由监听不到

vue 订阅