精华内容
下载资源
问答
  • 首页列表页购物车会员中心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'

    }

    }

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

    2020-11-03 16:45:31
    监听一级路由路由组件的渲染区域为router-view,作为顶层出口,它将匹配到的路由组件渲染在该区域中,路由组件渲染默认的方式是销毁 - 创建,因此$watch是监听不到一级路由变化的。所以,要想使用$router监听一...
    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()
            }
      }
    展开全文
  • 简单的两个路由,就无法监听到路由变化,不知道怎么回事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);

    },

    }

    });

    展开全文
  • 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来保证路由被监听到,这个我最近还没用的,有用过的小伙伴可以分享一下。

    展开全文
  • 例: 地址1:... ... 问题现象:当从第一个调第二个地址时,页面内容进行刷新,依然停留在地址1的内容,但是地址栏会变化为地址二。 解决方式:vue 的key htt...
  • vue监听路由

    2019-03-17 18:58:22
    watch:{ ... //侧边栏能进行高亮变动,所以需要监听路由变化,将当前类的变动的类i名加入组件 this.activeClass = to.path.slice(1) } } 第二种监听方式, watch:{ $route:{ deep:true, ...
  • @Watch('$route') routechange(to: any, from: any) { ...//参数相等 if (to.query.name!=from.query.name) {//todo } } 转载于:https://www.cnblogs.com/qiufang/p/11593865.html...
  • 直接上代码: ... immediate: true, // 一旦监听到路由变化立即执行 handler(to, from) { console.log("监听路由:" + JSON.stringify(to.name)); }, }, } 这样监听路由就能解决问题! ...
  • vue-router重新路由到当前页面,页面是进行刷新的 采用window.reload(),或者router.go(0)刷新时,整个浏览器进行了重新加载,闪烁,体验不好 使用 v-if 重新渲染部分组件或容器 需要重新渲染的内容 ... vue...
  • 1.废话多说直接上代码 ,即复制即用 ... 1.1需要注意的是 要放 mounted 里面 不要放 created 原因的话 去看 vue 的生命周期钩子 data() { return { _page: '', _rights: [], screenHeight: ...
  • 在'game-detail'页面执行this.$router.push()方法,跳转'game-detail',页面刷新。...但是可以在watch里监听$route,监听到id的变化。后来我就在watch里边监听路由,点击后……重新调用了获取页面数据的methods...
  • 首先确认 watch是一个对象,一定要当成对象来用。  对象就有键,有值。 键:就是你要监控的那个家伙,比如说$route,这个就是要监控路由变化。或者是data中的某个变量。...(一般监听时是监听到
  • vue路由入门

    2019-04-19 11:31:21
    监听url的变化,在变化前后执行响应的逻辑。 使用的步骤:①提供路由配置表,不同url匹配不同的组件配置 ②初始化路由实例 new VueRouter() ③挂载到Vue实例上 ④提供路由占位,用来挂载URL匹配的组件 配...
  • vue路由杂谈

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

    2020-03-29 22:23:14
    在某些情况下,当路由跳转前或跳转后、进入、离开某一个路由前、后,需要做某些操作,就可以使用路由钩子来监听路由变化 全局路由钩子: //进入某个路由组件之前 router.beforeEach((to, from, next) => { /...
  • 功能简介: 1、主页面路径mainpage、添加界面路径addpage 2、默认显示全部tab,...2、当路由变化时,判断缓存数据是否变化,变化则触发下拉刷新事件;否则,进行任何操作 实现步骤: 1、在添加界面,点击提交按...
  • vue路由守卫

    2020-04-05 22:30:51
    在某些情况下,当路由跳转前或跳转后、进入、离开某一个路由前、后,需要做某些操作,就可以使用路由钩子来监听路由变化 二、路由守卫实现方式 //通过路由钩子绑定事件 全局路由钩子: //进入某个路由组件之前 ...
  • Vue 前端路由 vue-router

    2017-12-21 16:43:00
    前端可以监听url变化;前端可以解析url并执行相应操作。 前后端分离:后端只提供API来返回数据,前端通过ajax获取数据后,在通过一定的方式渲染页面上。 SPA:前后端分离+前端路由。 SPA只有一个html文件,...
  • 重点:如何做到在保存数据的同时,可以在另一个路由监听到数据的变化并且执行相应的操作。 基本步骤: 1. 封装全局监听方法:在main.js中给Vue.protorype注册全局方法。约定监听的sessionStorage的值为...
  • 在处理屏幕首屏性能时遇到了需要监听路由变化的问题,过程还好,没那么难受 首先确定了单页应用无刷新首屏性能监听方案(这里展开讲,注意下“无刷新”,刷新的情况可以直接用performance) 其次在全局监听...
  • 例如:点击路由,跳转的时候传递参数,监听到参数变化实现动态切换路由样式 immediate:true 立即执行 :当刷新页面时会立即执行一次handler函数 使用场景: 加immediate:true 在tab切换时,你已经选中了2-1,当你刷新页面...
  • vue-route路由跳转同一页面时数据不会更新 1.问题描述 比如从www.shm.com/album/info/511跳转www.shm.com/album/info/512页面时,数据更新 2.解决办法 只需在watch中监听$route的变化即可 watch: { $...
  • 解决vue-route路由跳转同一页面时数据不会更新问题 1.问题描述 比如从www.shm.com/album/info/511跳转www.shm.com/album/info/512页面时,数据更新 2.解决办法 ,只需在watch中监听$route的变化即可 watch: { $...
  • vue路由传值页面没有实时更新怎么解决?...在本路由里面跳转到本路由上,只要路径不发生变化,在mounted()中是监测不到的,因为mounted()在组件创建时只执行了一次, 我们需要进行路由监听: 这样通过 val.que...
  • 1.将原本写在mounted里初始化数据的代码封装init()方法中 init(){ //页面初始化时获取路由参数,访问接口获取数据等操作 ...3.使用 watch,监听路由,一旦发生变化便调用init()方法 watch: { '$route':
  • 文章目录概念怎么写初始化监听深度监听监听data状态监听某个具体的状态监听路由变化监听整个路由监听个别参数监听计算属性监听props的数据 概念 用于监视某个状态的改变,是在视图层更新之后,监听的值改变了,...
  • 而且如果是<code>/foo/:id这种路由里面只是id变化时,因为是同一个组件,也是没有transition的,所以问题变得很复杂。 目前我增加了许多逻辑用来判断是否是直接进入的<code>/foo/:id的和以及从...
  • vue-router 同一个页面地址栏参数改变(比如文章的发布和编辑是同一个页面),不会触发vue...监听路由变化,把初始化的方法重新写到监听的方法里面执行 2、给router-view加个唯一的key,来保证路由切换时都会重新...
  • 问题:  在做项目的过程中,使用query传参数,发现跳转过程中第一次有参数,但是路由马上又跳转了一次,然后 ?和它之后的参数都不见了 问题分析: ...watch:{ //监听路由变化 '$route.path':...

空空如也

空空如也

1 2 3 4
收藏数 68
精华内容 27
关键字:

vue监听不到路由变化

vue 订阅