路由跳转和状态管理

1、路由跳转

首先将页面组件导入到router/index.js页面中
例如：
import find from '../views/find.vue'

然后在下面使用
const routes = [
 {
    path: '/cate',      //路径
    name: 'cate',       //名字
    component: cate     //导入的组件名
  }
  ]
  
  然后在其他页面可直接使用了
  this.$router.push({ path: "/shopscar" });

2、路由跳转传参

<!--可以传递数组-->
<!--在一个页面要跳转到/cateshops页面路径的时候，将参数以数组的形式进行传递-->

const routes = [
{
    path:'/cateshops/:shopsid',
    name:"cateshops",
    component:cateshops
  }
 ]

shopsbtn(value) {
      var numb = this.$route.params.myid;
      var arr = [value, numb];
      this.$router.push({ path: "/cateshops/" + arr });
    }


在cateshops组件内获取传递过来的值
 var num2 = this.$route.params.shopsid;
    var num = num2.split(",")[0];
    var numb = num2.split(",")[1];

3、状态管理

首先我们在store/index.js页面内定义值和方法

import { mapState, mapMutations } from "vuex";

<!--定义值-->
state: {
    showtabbar:true
  },
  
  <!--定义方法，可以改变state状态里面的值-->
    mutations: {
    gettabbarData(state,value){
      state.showtabbar=value
    }
  }

<!--下面就是对方法和值的用法了-->
<!--首先要在页面的methods方法里面引用状态管理里面的gettabbarData方法-->
 methods: {
    ...mapMutations(["gettabbarData"])
    }
    
    
<!--我们就可以在此页面用此方法了-->
<!--例如：我们在页面渲染完成之后将其值改变为false-->
mounted() {
this.$store.commit("gettabbarData", false);
}


<!--在页面注销之前又将其恢复到原来的值-->
beforeDestroy() {
    this.$store.commit("gettabbarData", true);
  }
  
  
  
  <!--获取状态管理里面的值的话，我们要首先要在computed里面引入-->
  computed:{
    ...mapState(["showtabbar"])
  }
  <!--然后我们就可以获取到值了-->
  var value = $store.state.showtabbar