Vue3 路由学习笔记

什么是路由

路由（Routing），指的是根据不同的 URL 地址展示不同的内容或页面。在 Vue3 中，路由实现了单页面应用（Single Page Application，SPA）的核心功能。

Vue3 官方提供了一个路由管理库 vue-router，可以快速、方便地实现路由功能。

安装和使用

1. 安装 vue-router

   bashCopy Code
   npm install vue-router@4.0.11 --save
   

2. 在 main.js 中导入并使用 vue-router

   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')
   

3. 创建路由实例并配置路由规则

   javascriptCopy Code
   import { createRouter, createWebHashHistory } 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: createWebHashHistory(),
     routes
   })
   
   export default router
   

路由跳转

在 Vue3 中，路由跳转通过 router-link 组件来实现。

htmlCopy Code
<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </div>
</template>

动态路由

动态路由指的是在路由规则中定义动态的占位符，以匹配不同的参数。

javascriptCopy Code
const routes = [
  {
    path: '/user/:id',
    name: 'User',
    component: User
  }
]

在组件中通过 $route 对象获取动态路由传递的参数。

htmlCopy Code
<template>
  <div>
    User Id: {{ $route.params.id }}
  </div>
</template>

嵌套路由

嵌套路由指的是在一个页面中嵌套另一个页面的路由。在路由规则中使用 children 字段来定义嵌套的子路由。

javascriptCopy Code
const routes = [
  {
    path: '/users',
    name: 'Users',
    component: Users,
    children: [
      {
        path: ':id',
        name: 'User',
        component: User
      }
    ]
  }
]

在父组件中通过 router-view 组件来显示子路由的内容。

htmlCopy Code
<template>
  <div>
    <router-link to="/users/1">User 1</router-link>
    <router-link to="/users/2">User 2</router-link>
    <router-view></router-view>
  </div>
</template>

导航守卫

导航守卫指的是在路由跳转前、后、或中断时执行的函数。Vue3 中提供了 beforeEach、beforeResolve 和 afterEach 三个导航守卫。

javascriptCopy Code
const router = createRouter({
  history: createWebHashHistory(),
  routes
})

router.beforeEach((to, from, next) => {
  console.log('beforeEach')
  next()
})

router.beforeResolve((to, from, next) => {
  console.log('beforeResolve')
  next()
})

router.afterEach(() => {
  console.log('afterEach')
})

实例

下面是一个简单的 Vue3 路由实例，展示了上述路由知识点的运用：

htmlCopy Code
<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-link to="/users">Users</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
import { createRouter, createWebHashHistory } from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'
import Users from './views/Users.vue'
import User from './views/User.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  },
  {
    path: '/users',
    name: 'Users',
    component: Users,
    children: [
      {
        path: ':id',
        name: 'User',
        component: User
      }
    ]
  }
]

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

export default {
  name: 'App',
  router
}
</script>

<style>
</style>