首页
列表页
购物车
会员中心
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'
}
}

watch监听：
	
监听一级路由：路由组件的渲染区域为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
      }
 }

		
		
监听子路由：需要在有子路由的情况下，才能在当前组件监听到子组件的路由变化，直接使用下面的方式即可。
		
watch: {
     $route(to,from){	     
      		...
     }
 }

		
	
	
路由导航守卫：
	
//不能获取组件实例 `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) {
// 监听不到变化？？
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有时候监听不到路由变化怎么办？
最近在使用vue项目的时候发现我们使用的watch监听不到$route的变化，查了很多文档最终终于找到解决办法。
方法一：路由包含子路由
方法二：监听$route.path对象
方法三：使用vue自带的路由守卫beforeRouteEnter ，beforeRouteUpdate ，beforeRouteLeave

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