【2024】vue-router和pinia的配置使用

vue-router

npm install vue-router

然后在src目录下创建文件夹router，以及下面的index.ts文件：
在这里插入图片描述
写进下面的初始化代码：

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'const router = createRouter({history: createWebHistory(process.env.BASE_URL),routes:[{path:"/",name:"main",component:()=>import("../views/home/IndexView.vue")}],
})
export default router

最后在main.ts文件中写：

import router from './router'
app.use(router)

pinia

先安装：

npm install pinia

然后在main.ts文件中使用：

import { createPinia } from 'pinia'const pinia = createPinia()app.use(pinia)

最后在src目录下创建文件夹store，然后新建你的文件，这里是index.ts：

import { defineStore } from 'pinia'export const store = defineStore('counter', {state: () => ({ count: 0, name: 'Eduardo' }),getters: {doubleCount: (state) => state.count * 2,},actions: {increment() {this.count++},},
})

在使用的时候引入就可以了！

vue-router+pinia进阶用法—动态路由

有点复杂，但是正规，修行看个人，看懂多少凭本事吧，其实上面哪些也够用了！
在store/modules/routes/index.ts写入：

import { defineStore } from 'pinia';interface Meta {id: string;auth?: boolean;keepAlive?: boolean;isActive?: boolean;isLnkActive?: boolean;isLink?: boolean;
}interface RouteData {name: string;path?: string;component?: string;meta: Meta;children?: Array<RouteData>;
}export const useRoutesStore = defineStore({id: 'routes',state: (): { routesData: Array<RouteData> } => ({routesData: [],}),getters: {routesData: (state) => state.routesData,},actions: {setRoutes(payload: { routesData: Array<RouteData> }) {this.routesData = payload.routesData;},},
});

在router/index.ts文件中：

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import { useRoutesStore } from '@/store/modules/routes';const router = createRouter({history: createWebHistory(process.env.BASE_URL),//在vue.config.js中的publicPath中配置根目录//记录滚动的位置解决白屏问题，必须配合keep-alivescrollBehavior(to, from, savedPosition) {if (savedPosition) {// 如果有保存的位置，则返回保存的位置return savedPosition;} else {// 否则返回一个新的位置对象return { left: 0, top: 0 };}},routes: [{path: "/",name: "main",component: () => import("../views/home/IndexView.vue")}],
})//将store内部的routes模块下的routesData数据源拼接成一维数组
const oneRoutes: any = [];
function setOneRoutes(data: RouteRecordRaw[]) {if (data.length > 0) {for (const route of data) {if (route.component) {const tmpComponent = route.component;route.component = () => import(`../views/${tmpComponent}`);oneRoutes.push(route);}if (route.children && route.children.length > 0) {setOneRoutes(route.children);}}}
}//使用setTimeout模拟setTimeout
setTimeout(() => {//服务端接口请求的数据源const routesData = [{name: "栏目管理",//路由名称path: "column",//路由中的pathcomponent: "admin/column/IndexView.vue",//路由映射的组件meta: {id: "1",auth: true,//会员登录验证标识keepAlive: false,//是否开启keep-alive。true:开启，false:关闭isActive: false,//点击后的颜色isLnkActive: false//点击链接后的颜色}},{name: "会员管理",meta: {id: "2",auth: true,keepAlive: false,isActive: false,isLnkActive: false,},children: [{name: "查看会员",path: "user",component: "admin/column/IndexView.vue",meta: {id: "2-1",auth: false,keepAlive: true,isActive: false,isLnkActive: false}},{name: "编辑会员",// path:"add_user",// component:"admin/user/add",meta: {id: "2-2",auth: true,keepAlive: false,isActive: false,isLnkActive: false},children: [{name: "添加",path: "add_user",component: "admin/user/AddView.vue",meta: {id: "2-2-1",auth: true,keepAlive: false,isActive: false,isLnkActive: false}}]}]},{name: "订单管理",meta: {id: "3",auth: true,keepAlive: false,isActive: false,isLnkActive: false},children: [{name: "查看订单",path: "order",component: "admin/order/IndexView.vue",meta: {id: "3-1",auth: true,keepAlive: false,isActive: false,isLnkActive: false}},]},{name: "百度",path: "http://www.baidu.com",meta: {id: "4",isActive: false,isLnkActive: false,isLink: true,//是否外链}}]useRoutesStore().setRoutes({ routesData: routesData });const oneRoutes = useRoutesStore().routesData as RouteRecordRaw[];router.addRoute({path: "/admin",name: "admin",component: () => import("../views/admin/index/IndexView.vue"),redirect: "/admin/column",meta: { auth: true },children: oneRoutes // 将组装好的子路由配置数据赋值给children属性});
}, 300)router.beforeEach((to, from, next) => {if (to.meta.auth) {if (localStorage['isLogin']) {next();} else {next("/");}} else {next();}
});
export default router