网站title怎么修改,网站如何搬家,企业微信开发框架,长春建站推荐目录 vue-routerpiniavue-routerpinia进阶用法---动态路由 有同学在项目初始化后没有下载vue-router和pinia#xff0c;下面开始#xff1a; vue-router
npm install vue-router然后在src目录下创建文件夹router#xff0c;以及下面的index.ts文件#xff1a; 写进下面的… 目录 vue-routerpiniavue-routerpinia进阶用法---动态路由 有同学在项目初始化后没有下载vue-router和pinia下面开始 vue-router
npm install vue-router然后在src目录下创建文件夹router以及下面的index.ts文件 写进下面的初始化代码
import { createRouter, createWebHistory, RouteRecordRaw } from vue-routerconst 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 piniaconst pinia createPinia()app.use(pinia)最后在src目录下创建文件夹store然后新建你的文件这里是index.ts
import { defineStore } from piniaexport const store defineStore(counter, {state: () ({ count: 0, name: Eduardo }),getters: {doubleCount: (state) state.count * 2,},actions: {increment() {this.count},},
})在使用的时候引入就可以了
vue-routerpinia进阶用法—动态路由
有点复杂但是正规修行看个人看懂多少凭本事吧其实上面哪些也够用了 在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?: ArrayRouteData;
}export const useRoutesStore defineStore({id: routes,state: (): { routesData: ArrayRouteData } ({routesData: [],}),getters: {routesData: (state) state.routesData,},actions: {setRoutes(payload: { routesData: ArrayRouteData }) {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
