Vue Router 路由管理完全指南

Vue Router 路由管理完全指南

Vue Router 简介

Vue Router 是 Vue.js 官方的路由管理器，它与 Vue.js 核心深度集成，让构建单页面应用变得易如反掌。

安装与基本设置

1
2
3
4
5
# 安装
npm install vue-router@4

# 或使用 yarn
yarn add vue-router@4

基本配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

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

export default router

在 main.js 中使用：

1
2
3
4
5
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

路由导航组件

1
2
3
4
5
6
7
8
9
<template>
  <div>
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于</router-link>
    
    <!-- 路由出口 -->
    <router-view></router-view>
  </div>
</template>

动态路由匹配

1
2
3
4
5
6
7
const routes = [
  {
    path: '/user/:id',
    name: 'User',
    component: User
  }
]

在组件中获取参数：

1
2
3
4
5
6
<script setup>
import { useRoute } from 'vue-router'

const route = useRoute()
console.log(route.params.id)
</script>

嵌套路由

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const routes = [
  {
    path: '/user/:id',
    component: User,
    children: [
      {
        // /user/:id/profile
        path: 'profile',
        component: UserProfile
      },
      {
        // /user/:id/posts
        path: 'posts',
        component: UserPosts
      }
    ]
  }
]

编程式导航

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import { useRouter } from 'vue-router'

const router = useRouter()

// 导航到指定路由
router.push('/about')

// 带参数的导航
router.push({
  name: 'User',
  params: { id: '123' }
})

// 带查询参数
router.push({
  path: '/search',
  query: { q: 'vue' }
})

// 前进/后退
router.go(-1) // 后退一步
router.go(1)  // 前进一步

路由守卫

全局前置守卫

1
2
3
4
5
6
7
8
router.beforeEach((to, from, next) => {
  // 检查用户是否已登录
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})

路由独享守卫

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const routes = [
  {
    path: '/admin',
    component: Admin,
    beforeEnter: (to, from, next) => {
      // 检查用户权限
      if (hasAdminRights) {
        next()
      } else {
        next('/403')
      }
    }
  }
]

组件内守卫

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
export default {
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被验证前调用
    next(vm => {
      // 通过 vm 访问组件实例
    })
  },
  beforeRouteUpdate(to, from, next) {
    // 当前路由改变，但该组件被复用时调用
    next()
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件对应的路由时调用
    next()
  }
}
</script>

路由元信息

1
2
3
4
5
6
7
8
9
10
11
const routes = [
  {
    path: '/admin',
    component: Admin,
    meta: { 
      requiresAuth: true,
      title: '管理后台',
      permissions: ['admin']
    }
  }
]

懒加载路由

1
2
3
4
5
6
7
const routes = [
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  }
]

滚动行为

1
2
3
4
5
6
7
8
9
10
11
const router = createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { top: 0 }
    }
  }
})

提示：Vue Router 是构建单页应用的核心工具，掌握它可以让你的应用导航更加灵活和强大。