vue之路由

在Vue 3中，使用Vue Router进行路由管理需要进行以下步骤：

1. 安装Vue Router

通过npm或yarn安装Vue Router，可以使用以下命令：

bashCopy code
npm install vue-router

2. 创建路由实例

创建Vue Router实例，通过调用createRouter函数，并传递选项来实现。例如：

javascriptCopy code
import { createRouter, createWebHistory } from 'vue-router';
import Home from '@/views/Home.vue';
import Category from '@/views/Category.vue';

const routes = [
  {
    path: '/',
    redirect: '/home',
  },
  {
    path: '/home',
    component: Home,
    name: 'Home',
  },
  {
    path: '/home/category',
    component: Category,
    name: 'Category',
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

3. 注册路由实例

将路由实例注册到Vue应用程序中。例如：

javascriptCopy code
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router);
app.mount('#app');

4. 创建路由视图

创建路由视图，即为不同的路由路径指定不同的组件。例如：

javascriptCopy code
<template>
  <div>
    <router-view></router-view>
  </div>

复杂路由的实现通常需要考虑多层嵌套的路由结构，以及路由传参、路由守卫、异步加载等功能。下面是一个示例的代码，它展示了一个具有复杂路由结构和各种功能的 Vue 3 路由：

javascriptCopy code
import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/views/Home.vue'
import Login from '@/views/Login.vue'
import Dashboard from '@/views/Dashboard.vue'
import Admin from '@/views/Admin.vue'
import UserList from '@/views/UserList.vue'
import UserDetails from '@/views/UserDetails.vue'
import NotFound from '@/views/NotFound.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/login',
    name: 'Login',
    component: Login,
  },
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: Dashboard,
    meta: {
      requiresAuth: true,
    },
  },
  {
    path: '/admin',
    component: Admin,
    meta: {
      requiresAuth: true,
      requiresAdmin: true,
    },
    children: [
      {
        path: 'users',
        name: 'UserList',
        component: UserList,
      },
      {
        path: 'users/:id',
        name: 'UserDetails',
        component: UserDetails,
      },
    ],
  },
  {
    path: '/:catchAll(.*)',
    component: NotFound,
  },
]

const router = createRouter({
  history: createWebHistory(),
  routes,
})

router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('isAuthenticated')
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth)
  const requiresAdmin = to.matched.some(record => record.meta.requiresAdmin)

  if (requiresAuth && !isAuthenticated) {
    next('/login')
  } else if (requiresAdmin && !isAuthenticated) {
    next('/dashboard')
  } else if (requiresAdmin && !isAdmin) {
    next('/dashboard')
  } else {
    next()
  }
})

export default router

这个代码实现了一个具有四个路由的 Vue 3 应用：

• /：显示主页。
• /login：显示登录页面。
• /dashboard：显示用户仪表盘页面，需要身份验证。
• /admin/users：显示用户列表页面，需要管理员权限。

该代码还定义了一个全局路由守卫，用于验证用户身份和权限。它根据路由的 meta 属性判断路由是否需要身份验证和管理员权限，然后根据用户是否已经登录和是否为管理员来判断是否允许访问路由。