vue3 router里使用pinia 实现 根据条件跳转到不同的子路由

1,664 阅读1分钟

在router里使用pinia

在store 文件夹里新建 pinia.ts文件

import { createPinia } from "pinia";
const pinia = createPinia()
export default pinia

mian.ts里引入

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import pinia from '@/store/pinia'

const app = createApp(App)
app.use(pinia) // 引入
app.use(router).mount("#app");

routes.ts

import { RouteRecordRaw } from "vue-router";
import pinia from "@/store/pinia";
import useUserStore from '../store/user'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    component: Layout,
    redirect: () => { 
      let type = useUserStore(pinia).type // 获取仓库里的的type
      if (type === 0) { // 根据条件跳转到不同的子路由
        return '/joinclass'
      } else {
        return '/teachclass'
      }
    }
 ]

vue 重定向一共有3种方式,第一种是直接通过路径去重定向,第二种是通过路由的 name 去重定向,第三种就是通过这个函数的返回值去重定向