快捷導(dǎo)航

Vue3使用Vue Router實(shí)現(xiàn)前端路由控制

更新時(shí)間：2024年10月16日 09:56:07 作者：前進(jìn)的胖子

在現(xiàn)代Web應(yīng)用中,前端路由控制是非常重要的一部分,它可以幫助我們將不同的頁(yè)面內(nèi)容展示給用戶(hù),同時(shí)保持用戶(hù)在瀏覽不同頁(yè)面時(shí)的連貫性,本文將介紹如何使用Vue Router來(lái)實(shí)現(xiàn)前端路由控制,需要的朋友可以參考下

Vue3 使用 Vue Router實(shí)現(xiàn)前端路由控制

首先，我們需要安裝Vue Router。在項(xiàng)目根目錄下運(yùn)行以下命令：

npm install vue-router@next

安裝完成后，我們可以開(kāi)始編寫(xiě)代碼了。首先，我們需要導(dǎo)入createRouter和createWebHistory函數(shù)，以及我們自定義的視圖組件。

import HomeView from '../views/HomeView.vue'
import AdminView from '@/views/AdminView.vue'
import AboutView from '../views/AboutView.vue'
import ChildenList from '@/views/childenList.vue'

接下來(lái)，我們需要?jiǎng)?chuàng)建一個(gè)路由實(shí)例，并配置我們的路由規(guī)則。在這個(gè)例子中，我們有三個(gè)主頁(yè)面：首頁(yè)（HomeView）、關(guān)于頁(yè)面（AboutView）和管理員頁(yè)面（AdminView）。我們還定義了一個(gè)子路由（ChildenList），用于顯示關(guān)于頁(yè)面下的子頁(yè)面。

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      children: [  
        {  
          path: 'ChildenList',  
          name: 'ChildenList',  
          component: ChildenList,  
          meta: { requiresAuth: true, role: 'admin' }
        }],
      //  component:AboutView,
    },
    {
      path: '/admin',
      name: 'admin',
      component:AdminView,
      meta: { requiresAuth: true, role: 'admin' }
    }
  ]

為了實(shí)現(xiàn)權(quán)限控制，我們需要在路由守衛(wèi)中添加一些邏輯。在每個(gè)路由規(guī)則中，我們可以添加一個(gè)meta屬性來(lái)指定該路由是否需要認(rèn)證以及對(duì)應(yīng)的角色。在這個(gè)例子中，我們?yōu)?code>/about和/admin路由設(shè)置了requiresAuth和role屬性

router.beforeEach((to, from, next) => {
  const user = "name" // 假設(shè)這是從localStorage獲取用戶(hù)信息的函數(shù)
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 這個(gè)路由需要權(quán)限
    if (!user || (to.meta.role && user !== to.meta.role)) {
      // 用戶(hù)未登錄或者角色不匹配
      next({ path: '/about'}) // 重定向到登錄頁(yè)面
    } else {
      // 用戶(hù)已登錄且角色匹配
      next()
    }
  } else {
    // 這個(gè)路由不需要權(quán)限
    next()
  }
})

最后將router導(dǎo)出