快捷導(dǎo)航

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

更新時間：2024年10月16日 09:56:07 作者：前進的胖子

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

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

首先，我們需要安裝Vue Router。在項目根目錄下運行以下命令：

npm install vue-router@next

安裝完成后，我們可以開始編寫代碼了。首先，我們需要導(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'

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

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' }
    }
  ]

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

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

最后將router導(dǎo)出