首页课程创意工坊价格

13 / 15

状态管理Pinia

Vue Router | 自在学

Vue Router

在现代Web应用中，路由是必不可少的。Vue Router是Vue.js的官方路由管理器，它让我们可以构建单页应用（SPA），实现页面之间的导航而不需要刷新整个页面。

Vue Router提供了声明式的路由配置、嵌套路由、路由参数、路由守卫等功能。现在让我们来学习Vue Router的用法，了解如何配置路由、实现导航、处理路由参数，以及如何使用路由守卫。

Vue Router

什么是Vue Router

Vue Router是Vue.js的官方路由管理器。它让我们可以：

定义路由规则，将URL映射到组件
实现页面之间的导航，不需要刷新整个页面
处理路由参数和查询字符串
实现嵌套路由
使用路由守卫控制访问权限

让我们先看一个简单的例子，理解Vue Router的基本用法。由于Vue Router需要通过npm安装，在CDN环境下使用比较复杂，我们这里主要介绍概念和用法，实际项目中使用Vite等构建工具会更方便。

安装Vue Router

在使用Vue Router之前，我们需要先安装它。如果使用Vite等构建工具，可以通过npm安装：

|
npm install vue-router@4

如果使用CDN，可以引入Vue Router的CDN链接：

|
<script src="https://unpkg.com/vue-router@4/dist/vue-router.global.js"></script>

基本路由配置

下面是如何进行基本的路由信息配置：

|
<div id="app">
  <router-view></router-view>
</div>
 
<script>
  const { createApp } = Vue;
  const { createRouter, createWebHistory } = VueRouter;
  
  // 定义路由组件
  const Home = {
    template: '<div><h1>首页</h1><p>欢迎来到首页</p></div>'
  };
  
  const About = {
    template: '<div><h1>关于</h1><p>这是关于页面</p></div>'
  };
  
  // 定义路由规则
  const routes = [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ];
  
  // 创建路由实例
  const router = createRouter({
    history: createWebHistory(),
    routes
  });
  
  // 创建应用实例并挂载路由
  const app = createApp({});
  app.use(router);
  app.mount('#app');
</script>

在这个例子中，我们定义了两个路由：/对应Home组件，/about对应About组件。<router-view>是路由出口，用于显示当前路由对应的组件。

路由导航

Vue Router提供了两种方式进行路由导航：声明式导航和编程式导航。

声明式导航

在Vue Router中，声明式导航是通过<router-link>组件来实现的。<router-link>用于生成带有路由跳转功能的链接。当用户点击这些链接时，页面会自动根据设置的路由切换到对应的组件页面，而不会重新加载整个页面。你可以为<router-link>的to属性指定跳转的路径，还可以通过设置active-class修改激活时的样式类。例如：

|
<div id="app">
  <nav>
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于</router-link>
  </nav>
  <router-view></router-view>
</div>
 
<script>
  const {

<router-link>会渲染成<a>标签，点击时会导航到指定的路由。当前激活的路由会自动添加router-link-active类。

编程式导航

编程式导航是通过在代码中调用路由实例的方法（如router.push()、router.replace()等）来实现路由跳转的。这种方式常用于需要在事件处理函数、条件判断或异步操作后进行路由跳转的场景。例如，当用户完成表单提交或需要在逻辑判断后自动跳转页面时，就可以使用编程式导航。

常用的方式有：

router.push(location): 导航到新的路由，类似于点击<router-link>。参数可以是路径字符串（如'/about'），也可以是一个包含路径和参数的对象。
router.replace(location): 与push类似，但不会在历史记录中留下新条目，常用于替换当前页面。
router.go(n): 在浏览历史中向前或向后跳转n步。

例如：

|
// 跳转到首页
router.push('/');
 
// 跳转到关于页面
router.push({ path: '/about' });
 
// 用replace方式跳转，不产生新历史记录
router.replace('/about');

这种编程式方式适合在方法、回调、事件处理等需要主动进行页面跳转的地方使用。

|
<div id="app">
  <nav>
    <button @click="goToHome">首页</button>
    <button @click="goToAbout">关于</button>
  </nav>
  <router-view></router-view>
</div>
 
<script>
  const {

在Vue 3的组合式API（Composition API）中，如果我们想要在setup()函数里访问和操作路由实例，可以使用useRouter函数。它可以让我们获取当前应用的router实例，从而进行编程式导航（如跳转页面）、访问路由信息等。比如，如果你希望在点击按钮时跳转到首页，可以这样做：

|
import { useRouter } from 'vue-router';
 
export default {
  setup() {
    const router = useRouter(); // 获取路由实例
 
    const goToHome = () => {
      router.push('/'); // 跳转到首页
    };
 
    return {
      goToHome,
    };
  }
}

同理，如果还需要跳转到其它页面，只需调用router.push()方法并传入对应的路径即可。useRouter只能在setup()或<script setup>等组合式API相关的地方使用，不能在组件外部或普通函数里直接调用。

|
<script>
  const { createApp } = Vue;
  const { createRouter, createWebHistory, useRouter } = VueRouter;
  
  const app = createApp({
    setup() {
      const router = useRouter();
      
      const goToHome = () => {
        router.

路由参数

我们可以通过路由参数传递数据。有两种方式：路径参数和查询参数。

路径参数

路径参数（params）是URL路径中的动态部分，用于在路由中传递变量。你可以在路由地址中声明路径参数，通常以冒号（:）开头。例如，路径 /user/:id 中的 :id 就是一个路径参数。这样，访问 /user/123 时，id 会自动解析为 '123'，并可以在组件中通过 route.params.id 获取对应的参数值。

|
<div id="app">
  <router-view></router-view>
</div>
 
<script>
  const { createApp } = Vue;
  const { createRouter, createWebHistory, useRoute } = VueRouter;
  
  const User = {
    setup() {

在这个例子中，:id是路径参数。当我们访问/user/123时，route.params.id的值就是'123'。

查询参数

查询参数（query parameters）是指URL中以问号（?）开始、使用键值对（key=value）形式表示的数据，并可通过&连接多个参数。例如，在URL /search?keyword=Vue&page=1 中，keyword=Vue 和 page=1 就是查询参数。查询参数通常用于向页面传递过滤、分页等信息，可以在Vue路由中通过 route.query 对象来访问这些参数。例如：

|
<div id="app">
  <router-view></router-view>
</div>
 
<script>
  const { createApp } = Vue;
  const { createRouter, createWebHistory, useRoute } = VueRouter;
  
  const Search = {
    setup() {

当我们访问/search?keyword=Vue&page=1时，route.query.keyword的值是'Vue'，route.query.page的值是'1'。

嵌套路由

嵌套路由是指在父路由组件内部再定义子路由，让不同的子路由渲染到父组件中的 <router-view> 里。这样可以让多个路由层级在页面结构上呈现嵌套关系。

使用嵌套路由时，父组件通常会包含一个 <router-view>，用于展示其子路由对应的组件。例如 /user 是一个父路由，它可以有个人资料（/user/profile）和文章列表（/user/posts）等子路由。这样，不同的子页面会在父用户页内切换显示。

|
<div id="app">
  <router-view></router-view>
</div>
 
<script>
  const { createApp } = Vue;
  const { createRouter, createWebHistory } = VueRouter;
  
  const User = {
    template: `
      <div>

在这个例子中，User组件内部有子路由。子路由的路径是相对于父路由的，所以profile的完整路径是/user/profile。

路由守卫

路由守卫用于在路由导航过程中执行一些操作，比如权限检查、数据加载等。

全局前置守卫

beforeEach是 Vue Router 的全局前置守卫（Global Before Guard），它会在每一次路由跳转前被调用。你可以在这里执行一些逻辑，例如：检查用户是否已经登录、动态修改页面标题、权限校验、数据预加载等。beforeEach 接收三个参数：

to：即将要进入的目标路由对象。
from：当前导航正要离开的路由对象。
next：必须调用该方法来 resolve 这个钩子。可以通过 next()放行，next('/login')重定向，或 next(false)取消导航。

全局前置守卫的应用非常广泛。例如，常用来做身份验证——只有登录用户才可以访问某些路由，未登录用户将被重定向到登录页。

示例说明：

|
router.beforeEach((to, from, next) => {
  // to: 目标路由对象
  // from: 当前路由对象
  // next: 控制是否通过导航或重定向
  const isAuthenticated = checkAuth(); // 假设这是检查是否登录的函数
 
  if (to.path === '/admin' && !isAuthenticated) {
    // 如果要进入 admin 页面且未登录，跳转到登录页
    next('/login');
  } else {
    // 其他情况直接放行
    next();

这样能够保证所有需要登录的页面都先经过统一的身份校验。

|
<script>
  const router = createRouter({
    history: createWebHistory(),
    routes
  });
  
  router.beforeEach((to, from, next) => {
    // to: 目标路由
    // from: 当前路由
    // next: 控制导航的函数
    
    // 检查是否需要登录
    const isAuthenticated = checkAuth(); // 假设这是一个检查登录的函数

组件内守卫

除了在全局注册路由钩子以外，我们还可以直接在单个组件内部定义路由守卫。Vue 提供了三种组件内守卫钩子函数，分别用于在不同的路由导航流程中执行自定义逻辑：

beforeRouteEnter(to, from, next)：在路由进入前调用，此时组件实例还未被创建，无法访问 this，可以在导航确认前进行异步数据获取或权限检测。
beforeRouteUpdate(to, from, next)：当当前路由改变，但该组件被复用时调用，可以访问 this，适合根据路由参数的变化更新组件数据。
beforeRouteLeave(to, from, next)：导航离开当前组件对应的路由时调用，可用于导航离开前的确认或收尾工作，例如弹窗提示未保存更改。

|
<script>
  const UserProfile = {
    beforeRouteEnter(to, from, next) {
      // 在进入路由之前执行
      // 此时组件实例还未创建，无法访问this
      loadUserData(to.params.id).then(() => {
        next();
      });
    },
    beforeRouteUpdate(to, from, next) {
      // 在当前路由改变，但组件被复用时执行
      // 可以访问this
      this

路由元信息

在 Vue 路由配置中，我们可以通过在每个路由对象中添加 meta 字段，为该路由设置自定义的元信息。这些元信息可以用于存储任何辅助数据，比如权限控制、页面标题、面包屑、动画标识等。 meta 字段是一个普通对象，其内容不会影响路由功能，但可以在路由守卫或组件中根据需要读取和使用。例如，可以根据 meta.requiresAuth 判断是否需要登录权限后再进入页面，或者根据 meta.title 动态设置页面标题。

|
<script>
  const routes = [
    {
      path: '/admin',
      component: Admin,
      meta: {
        requiresAuth: true,
        title: '管理后台'
      }
    }
  ];
  
  router.beforeEach((to, from, next) => {
    if (to.meta.requiresAuth && !isAuthenticated

综合示例

下面我们通过一个更加详细的综合示例，来帮助大家理解和实践前面学到的 Vue Router 相关知识。在这个示例中，我们将搭建一个简单的博客应用，涵盖以下内容：

设置多级路由，包括首页、文章列表、单篇文章详情和关于页。
演示如何在路由对象中配置 meta 字段，实现如登录校验、动态标题等功能。
通过导航守卫（如 beforeEach）拦截路由，实现简单的权限控制。
使用 <router-link> 实现页面间导航，并通过 <router-view> 渲染对应组件。
利用路由参数获取并展示动态内容，比如访问不同文章的详情页。

通过这个例子，大家可以全面体会到 Vue Router 的基础用法及实际开发中的典型场景。

|
<div id="app">
  <nav>
    <router-link to="/">首页</router-link>
    <router-link to="/posts">文章列表</router-link>
    <router-link to="/about">关于</router-link>
  </nav>
  <router-view></router-view>

在实际项目中，Vue Router通常与Vite等构建工具一起使用。使用构建工具可以更好地组织代码，支持单文件组件（.vue文件），提供更好的开发体验。

下一步

在这一节课中，我们学习了Vue Router的基本用法。我们了解了如何配置路由、实现导航、处理路由参数，以及如何使用路由守卫。 Vue Router是构建单页应用的重要工具。掌握它后，你就能构建出功能完整的单页应用。

在下一堂课，我们将学习Pinia，了解如何在Vue应用中进行状态管理。这将帮助我们更好的管理应用中的全局状态。