vue3 vite pinia配置動(dòng)態(tài)路由、解決刷新頁(yè)面路由消失的問(wèn)題

更新時(shí)間：2023年10月23日 09:13:36 作者：解二

這篇文章主要介紹了vue3 vite pinia配置動(dòng)態(tài)路由、解決刷新頁(yè)面路由消失的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

實(shí)現(xiàn)思路

1，需要在靜態(tài)路由的基礎(chǔ)上用vue路由上面的addRoute()方法來(lái)動(dòng)態(tài)添加路由，最后生成我們需要的路由

2，封裝添加路由的方法，在刷新頁(yè)面時(shí)重新生成路由

首先創(chuàng)建靜態(tài)路由

// 靜態(tài)路由 
export const basicRoutes = [
  {
    path: '/',
    redirect: '/login',
  },
  {
    path: '/login',
    name: 'login',
    component: () => import('@/views/login/index.vue'),
  },
  // 免登錄跳轉(zhuǎn)到項(xiàng)目中
  {
    path: '/hideLogin',
    name: 'hideLogin',
    component: () => import('@/views/hideLogin/index.vue'),
  },
  {
    // 異常頁(yè)面
    path: '/errorPage',
    component: () => import('@/components/error-page/404'),
    name: '404',
  },
]

創(chuàng)建路由的時(shí)候引入

import { createRouter, createWebHistory } from 'vue-router'
import { basicRoutes as routes } from './routes' // 引入靜態(tài)路由
 
export const router = createRouter({
  history: createWebHistory('/'),
  routes,
  scrollBehavior: () => ({ left: 0, top: 0 }),
})
export default router

封裝處理路由方法

import { deepClone } from '@/utils/utils' // 深拷貝
import router from './index'
// 處理路由展示列表樹(shù)形格式 (如果所有路由數(shù)據(jù)是在同一級(jí)，需要調(diào)用這個(gè)方法)
export const formatRouterTree = (data) => {
  let parents = data.filter((i) => i.pid === 0),
    children = data.filter((item) => item.pid !== 0)
  dataToTree(parents, children)
  function dataToTree(parents, children) {
    parents.map((p) => {
      children.map((c, i) => {
        let _c = deepClone(children)
        _c.splice(i, 1)
        dataToTree([c], _c)
        if (p.children) {
          p.children.push(c)
        } else {
          p.children = [c]
        }
      })
    })
  }
}
 
// vite中獲取文件
const modules = import.meta.glob([
  '../views/*.vue',
  '../views/*/*.vue',
  '../views/*/*/*.vue',
  '../components/layout/index.vue',
])
 
// 處理路由所需格式
export const generateRouter = (userRouters) => {
  let newRouter = null
  if (userRouters)
    newRouter = userRouters.map((i) => {
      let routes = {
        path: i.pathUrl,
        name: i.name,
        // meta: i.meta,
        component:
          i.pathUrl === '/layout'
            ? modules[`../components/layout/index.vue`]
            : modules[`../views${i.pathUrl}/index.vue`],
      }
      if (i.children) {
        routes.children = generateRouter(i.children)
      }
      return routes
    })
  return newRouter
}
 
/**
 * 添加動(dòng)態(tài)路由
 */
export function setAddRoute(routes) {
  if (routes && routes.length > 0)
    routes.forEach((route) => {
      const routeName = route.name
      if (!router.hasRoute(routeName)) router.addRoute(route)
    })
}

在store中寫(xiě)一個(gè)調(diào)用方法

import { defineStore } from 'pinia'
import { generateRouter, setAddRoute } from '@/router/vue-router.js'
export const routeStore = defineStore('route', {
  state: () => {
    return {
    }
  },
  actions: {
    addRouter() {
      // 生成路由樹(shù)
      // routerList在登陸成功時(shí)獲取到，在跳轉(zhuǎn)頁(yè)面之前存起來(lái)
      let find = JSON.parse(window.localStorage.getItem('routerList'))
      let routerList = generateRouter(find)
      // 添加路由
      setAddRoute(routerList)
    },
  },
  getters: {},
})

登陸時(shí)存儲(chǔ)路由信息

import { generateRouter, setAddRoute } from '@/router/vue-router.js'
 
Login.Login(params).then(async (res) => {
     if (res.code === 200) {
        // 存用戶(hù)信息、token等,這里不寫(xiě)了
 
        // 調(diào)接口獲取路由信息 params傳當(dāng)前用戶(hù)角色來(lái)獲取對(duì)應(yīng)的路由信息
        let routerList = await getRouterList(params)
        // 存儲(chǔ)路由信息
        window.localStorage.setItem('routerList', routerList)
        
        // 生成路由樹(shù)
        let list = generateRouter(routerList)
        // 添加路由
        setAddRoute(list)
        
        // 最后跳轉(zhuǎn)到首頁(yè)并提示
        router.push('首頁(yè)')
        ElMessage.success('登陸成功')
     }  
})

解決刷新消失

上面只是在登陸時(shí)候添加了路由，點(diǎn)擊刷新頁(yè)面后會(huì)消失，需要在main.js中配置一下

import { createPinia } from 'pinia'
import { routeStore } from '@/store/modules/routeMenu.js' // 這個(gè)是我的store里面的方法路徑
const store = createPinia()
const app = createApp(App)
app.use(store)
let routeStores = routeStore()
const addRouter = () => {
  routeStores.addRouter()
}
addRouter()
// router要在添加完路由之后引入，不然還沒(méi)添加，路由已經(jīng)生成了
app.use(router)