vue3 vite pinia配置動態(tài)路由、解決刷新頁面路由消失的問題

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

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

實現思路

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

2，封裝添加路由的方法，在刷新頁面時重新生成路由

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

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

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

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'
// 處理路由展示列表樹形格式 (如果所有路由數據是在同一級，需要調用這個方法)
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
}
 
/**
 * 添加動態(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中寫一個調用方法

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

登陸時存儲路由信息

import { generateRouter, setAddRoute } from '@/router/vue-router.js'
 
Login.Login(params).then(async (res) => {
     if (res.code === 200) {
        // 存用戶信息、token等,這里不寫了
 
        // 調接口獲取路由信息 params傳當前用戶角色來獲取對應的路由信息
        let routerList = await getRouterList(params)
        // 存儲路由信息
        window.localStorage.setItem('routerList', routerList)
        
        // 生成路由樹
        let list = generateRouter(routerList)
        // 添加路由
        setAddRoute(list)
        
        // 最后跳轉到首頁并提示
        router.push('首頁')
        ElMessage.success('登陸成功')
     }  
})

解決刷新消失

上面只是在登陸時候添加了路由，點擊刷新頁面后會消失，需要在main.js中配置一下

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