Vue3+Ts+Vant项目：路由守卫、router-link、Vuex

路由守卫

// 路由守卫
// 只要进入到某个路由就会执行此方法
router.beforeEach((to, from, next) => {
  // to:到达的路由  from:从哪个路由跳转的  next:只有执行了next,页面才会被渲染
  console.log("打开某个路由了",to);
  // eg: 判断用户是否登录
  next()
})

router-link

<template> 
    <div>
    <!-- router-link相当于a标签 ,to 属性必须并且为跳转页面的path -->
        <router-link to="/about">about页面</router-link>
        <!-- 带参 to内容是对象 -->
        <router-link :to="{name:'about',query:{id:1,name:'bag'}}">about页面</router-link>
        <router-link :to="{path:'/about'}">about页面</router-link>
        <van-button type="primary" @click="handleClick1">传参形式-query</van-button>
        <van-button type="primary" @click="handleClick2">传参形式-params</van-button>
    </div>
</template>

<script lang="ts">
import { Vue, Options } from "vue-class-component";
import {useRoute,useRouter} from "vue-router"
@Options({
  components: {},
})
export default class HomeView extends Vue {
  route:any = useRoute()  //用来获取路由对象的数据
  router:any = useRouter()  //路由对象,进行进行跳转

  // 方法声明
  handleClick1():void{
    this.router.push({
      path:"/about",     //也可以是name
      // name:"about"
      query:{
        id:123
      }
    })
  }
  handleClick2():void{
    this.router.push({
      name:"about",   //params传参必须是name,不能是path，页面刷新参数消失
      params:{
        id:123
      }
    })
  }
}
</script>

接收参数：
  route:any = useRoute();
  // 生命周期
  public created() {
    console.log("参数", this.route.query);
    console.log("params参数", this.route.params);
  }

router-view:路由管理组件

Vuex:状态管理

import { createStore } from 'vuex'
import uInfo from "./userInfo"

export default createStore<any>({
  // 初始化数据
  state: {
    num:1
  },
  // 相当于计算
  getters: {
    getNum(state){
      return state.num + "!!!"
    }
  },
  // 同步更改state
  // commit触发mutations内的方法
  // state的更改最终都是触发mutations
  mutations: {
    addNum(state){
      state.num++
    },
    addNum2(state,param){
      state.num+=param
    }
  },
  // 异步更改state
  // dispatch触发actions内的方法
  // 可以返回promise
  actions: {
    addNum(context){
      context.commit("addNum")
    },
    addNum2(context,param){
      return new Promise((resolve,reject)=>{
        // 进行ajax请求
        // 成功/失败进行不同的操作
      })
      context.commit("addNum2",param)
    }
  },
  // 取值时后面需要加上模块名
  //触发方法的时候，方法名字为 "模块名/方法名"
  modules: {
    uInfo
  }
})

<template>
  <div> 
    <van-button type="primary" @click="handleChangeState">同步更改</van-button>
    <van-button type="primary" @click="handleChangeState2">异步更改</van-button>
  </div>
</template>
<script lang="ts">
import { Vue, Options } from "vue-class-component";
import { useStore } from "vuex";
@Options({
  components: {    },
})
export default class HomeView extends Vue {

  store:any = useStore()

  handleChangeState():void{
    // this.store.commit("addNum")
    this.store.commit("addNum2",100)
    console.log("更改vuex",this.store.state.num)
  }
  handleChangeState2():void{
    // this.store.dispatch("addNum")
    this.store.dispatch("addNum2",100)
    console.log("更改vuex",this.store.state.num); 
  }
}
</script>