加盟网网站建设策划书,二手物品交易网站设计英文,菜户营网站建设,天津网站制作南昌前端开发之vue动态路由实现方案 前言2. 实现1、登录页面创建登录函数和watch监听路由2、调用的login方法#xff08;1#xff09;登录方法#xff08;2#xff09;存储token 3、router.push的时候调用路由守卫#xff08;1#xff09;创建路由守卫#xff0c;建议路由守… 前端开发之vue动态路由实现方案 前言2. 实现1、登录页面创建登录函数和watch监听路由2、调用的login方法1登录方法2存储token 3、router.push的时候调用路由守卫1创建路由守卫建议路由守卫封装为单独的文件2var文件引用 3将在main中添加调用由于我封装到permissions.ts文件中通过var文件调用(4) setRoutes方法存储vuex中routes,合并路由列表(5)filterRoutes:根据权限和rolesControl过滤路由(6)toLoginRoute: 4、创建router.js 文件创建路由列表和添加路由的方法 前言
本篇讲解的路由实现方案默认存在的路由json-登录获取路由的json数据和权限-index.vue页面通过watch监听router为路由附加默认值-通过router.push跳转-触发beforeEach实现页面权限的判断和addrouter合并路由列表
2. 实现
1、登录页面创建登录函数和watch监听路由
//redirect 赋值
watch: {$route: {handler (route) {this.redirect (route.query route.query.redirect) || /},immediate: true}},//登录函数
const ruleForm ref()
const login (userInfo) {dispatch(user/login, userInfo)
}
const handleRoute () {return data.redirect /404 || data.redirect /403? /: data.redirect
}
const handleLogin () {ruleForm.value.validate(async (valid) {if (valid) {try {data.loading trueawait login(data.forms)await router.push(handleRoute())} finally {data.loading false}}})
}2、调用的login方法
1登录方法
const actions {//登录成功将token存储到localStorage中并为vuex的token中赋值async login ({ commit }: { commit: any }, userInfo: any) {// const { data } await login(userInfo)// const token data[tokenName]const token admin-token-bbfd1c4e-4e11-F71E-B4B6-aEbCE62cDC3Aif (token) {commit(setToken, token)const hour new Date().getHours()} else {const err 登录接口异常未正确返回${tokenName}...throw err}}
}2存储token * description 存储token* param token*/
export function setToken (token:any) {if (storage) {if (storage localStorage) {return localStorage.setItem(tokenTableName, token)} else if (storage sessionStorage) {return sessionStorage.setItem(tokenTableName, token)} else if (storage cookie) {return cookie.set(tokenTableName, token)} else {return localStorage.setItem(tokenTableName, token)}} else {return localStorage.setItem(tokenTableName, token)}
}3、router.push的时候调用路由守卫
1创建路由守卫建议路由守卫封装为单独的文件
详细讲解了路由的跳转和
/*** description 路由守卫*/
import store from /store
import router from /router
import getPageTitle from /utils/pageTitle
import { toLoginRoute } from /utils/routes
import configOb from /config
//调用封装的配置文件
//intelligence(前端导出路由)和all(后端导出路由)两种方式
//authentication: intelligence,
const { authentication } configOb
export function setup () {router.beforeEach(async (to, from, next) {//获取tokenlet hasToken store.getters[user/token]if (hasToken) {if (store.getters[routes/routes].length) {// 禁止已登录用户返回登录页if (to.path /login) {next({ path: / })} else next()} else {//setRoutes:下面讲解存储vuex中routes,合并路由列表await store.dispatch(routes/setRoutes, authentication)next({ ...to, replace: true })}} else {next(toLoginRoute(to.path))}})router.afterEach((to) {//设置标题document.title getPageTitle(to.meta.title)})
}
2var文件引用 export function setupVab (app: any) {// 加载插件const Plugins require.context(./plugins, true, /\.ts$/)Plugins.keys().forEach((key) Plugins(key).setup(app))
}3将在main中添加调用由于我封装到permissions.ts文件中通过var文件调用
import { createApp } from vue
import App from ./App.vue
import { setupVab } from /vabconst app createApp(App)
setupVab(app)(4) setRoutes方法存储vuex中routes,合并路由列表
async setRoutes ({ commit }: { commit: any }, mode none) {// 默认前端路由const routes [...asyncRoutes]// 设置游客路由关闭路由拦截const control mode visit ? false : rolesControl// 后端路由// if (authentication all) {// const { data } await getRouterList()// const { list } data// if (!isArray(list))// gp.$baseMessage(// 路由格式返回有误,// error,// false,// vab-hey-message-error// )// if (list[list.length - 1].path ! *) {// list.push({// path: /:pathMatch(.*)*,// redirect: /404,// name: NotFound,// hidden: true// })// routes convertRouter(list)// }// 根据权限和rolesControl过滤路由const finallyRoutes filterRoutes([...constantRoutes, ...routes], control)// // 设置菜单所需路由commit(setRoutes, finallyRoutes)// // 根据可访问路由重置Vue Routerawait resetRouter(finallyRoutes)},(5)filterRoutes:根据权限和rolesControl过滤路由
export function filterRoutes (routes:any, rolesControl:any, baseUrl /) {return routes.filter((route:any) {if (rolesControl route.meta route.meta.roles) {return hasAccess(route.meta.roles)return false} else { return true }})// .map((route) {// if (route.path ! * !isExternal(route.path))// route.fullPath resolve(baseUrl, route.path)// if (route.children)// route.children filterRoutes(// route.children,// rolesControl,// route.fullPath// )// return route// })
}(6)toLoginRoute:
/*** 获取当前跳转登录页的Route* param currentPath 当前页面地址*/
export function toLoginRoute (currentPath:any) {if (recordRoute currentPath ! /) {return {path: /login,query: { redirect: currentPath },replace: true}} else {return { path: /login, replace: true }}
}4、创建router.js 文件创建路由列表和添加路由的方法
设置默认路由和模拟请求后添加的路由定义添加路由的方法
// 定义路由和路由添加的方法
import { createRouter, createWebHashHistory, createWebHistory } from vue-router
import configOb from /config
import { getNames } from /utils/routes//设置默认数组
export const constantRoutes [{path: /login,name: Login,component: () import(/views/login/index.vue),hidden: true},{path: /403,name: 403,component: () import(../views/403.vue),hidden: true},{path: /404,name: 404,component: () import(../views/404.vue),hidden: true}
]//假设请求的到的数组
export const asyncRoutes [{path: /,name: Root,// component: Layout,redirect: /index,meta: {title: 平台首页,icon: iconfont icon-ptsyy icon-white},children: [{path: index,name: Index,component: () import(../views/index/index.vue),meta: {title: 首页,icon: home-2-line,noClosable: true}}]},{path: /error,name: Error,// component: Layout,redirect: /error/403,menuHidden: true,meta: {title: 错误页,icon: error-warning-line},children: [{path: 403,name: Error403,component: () import(../views/403.vue),meta: {title: 403,icon: error-warning-line}},{path: 404,name: Error404,component: () import(../views/404.vue),meta: {title: 404,icon: error-warning-line}}]},{path: /:pathMatch(.*)*,redirect: /404,name: NotFound,hidden: true}
]//是否开启hash模式
const { isHashRouterMode, publicPath } configOb
const router createRouter({history: isHashRouterMode? createWebHashHistory(publicPath): createWebHistory(publicPath),routes: constantRoutes
})/*** 添加路由* param routes*/
function addRouter (routes:any) {routes.forEach((route:any) {if (!router.hasRoute(route.name)) router.addRoute(route)if (route.children) addRouter(route.children)})
}export default router
