「从零开始的 Vue 3 系列：第七章——深入学习核心功能——Router(巨详细)

🕗 发布于 2024-10-15 14:28 vue.js 学习前端

前言

本系列将从零开始，系统性地介绍 Vue 3 的常用 API，逐步深入每个核心概念与功能模块。通过详尽的讲解与实战演示，帮助大家掌握 Vue 3 的基础与进阶知识，最终具备独立搭建完整 Vue 3 项目的能力。

Vue核心功能之一Router

ue 3 中的 Vue Router 是用于构建单页面应用程序（SPA）的官方路由管理器，它提供了强大而灵活的导航机制，让开发者可以轻松地管理应用内的多页面导航。

安装配置步骤

1.npm安装Router

cd my-vue-app
npm install vue-router@4

2.配置 Vue Router

引入router
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(), // 使用 HTML5 History 模式
  routes
});
export default router;

3.main.js中挂载

import { createApp } from 'vue';
import App from './App.vue';
import router from './router'; // 导入路由配置

const app = createApp(App);

app.use(router); // 使用路由器

app.mount('#app');

4.在应用中使用路由

<template>
  <div id="app">
    <nav>
      <ul>
        <li><router-link to="/">Home</router-link></li>
        <li><router-link to="/about">About</router-link></li>
      </ul>
    </nav>
    <router-view></router-view>
  </div>
</template>

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

内容详解：

1.声明式路由配置

在 Vue Router 中，你可以使用声明式方式定义应用的路由规则。每个路由映射到一个组件，当用户访问某个路径时，Vue Router 会渲染与之关联的组件。

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

2.动态路由

动态路由允许你使用参数（如用户 ID 或文章 ID）来匹配不同的路径。例如，/user/:id 可以匹配 /user/1 或 /user/2 等不同的路径，并通过 $route.params 访问这些参数。
后面的一篇关于权限的文章会详细介绍动态路由的使用

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

3.嵌套路由

嵌套路由（也称为子路由）可以在应用中创建多层嵌套的视图结构。例如，一个主页可以有多个子视图，这些子视图各自拥有自己的路由。
嵌套路由也是我们工作中用到非常多的一个功能

const routes = [
  {
  //路由地址
    path: '/parent',
    //页面文件位置
    component: () => import('@/views/jlsbjc/index'),
    //子路由
    children: [
      { 
      path: 'child',
      //子路由组件
      component: Child },
    ],
  },
];

4.导航守卫

Vue Router 提供了钩子函数（如 beforeEach 和 beforeResolve），可以在路由发生变化之前或之后执行逻辑。这对于权限验证、数据预加载等操作非常有用。
之后权限文章也会详细讲解路由守卫

router.beforeEach((to, from, next) => {
//to代表着你要去哪里（表示即将要进入的目标路由对象。）
//from代表着你从哪里来（代表当前导航正要离开的路由对象。）
//next重定向，如果没有权限就直接跳转到指定的路由页面，一般是登录页面
  // 判断用户是否有权限访问该路由
  if (to.meta.requiresAuth && !isAuthenticated()) {
  //如果没有就重定向到页面首页
    next('/login');
  } else {
  // 继续导航
    next();
  }
});

5. 路由懒加载

为了优化性能，Vue Router 支持路由的懒加载功能，即只有在用户访问某个路由时才加载对应的组件。这样可以减少初次加载时的资源体积，提高页面响应速度。

const routes = [
  {
    path: '/about',
    component: () => import('./views/About.vue'),
  },
];

6. 滚动行为

Vue Router 支持自定义页面滚动行为，你可以指定当用户导航到新页面时页面的滚动位置。这在单页应用中提升了用户体验。

const router = createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition;
    } else {
      return { top: 0 };
    }
  },
});

7. 路由模式（history、hash）

在 Vue Router 的 hash 模式和 history 模式中，Vue 提供了一些常用的方法来进行导航操作。无论是 hash 模式还是 history 模式，这些方法的使用方式是相同的，主要的差异体现在路由模式的 URL 表现形式和浏览器交互方式上。

1. 用于导航到一个新的 URL 地址：router.push()

this.$router.push('/about'); // 使用路径
this.$router.push({ path: '/about' }); // 或者使用对象形式
this.$router.push({ name: 'about' }); // 使用命名路由
this.$router.push({ path: '/about', query: { id: 123 }}); // 带有查询参数

1. 替换当前的路由，不会向 history 栈中添加新记录。：router.replace()

this.$router.replace('/about');
this.$router.replace({ name: 'about' });
this.$router.replace({ path: '/about', query: { id: 123 }});

1. 用于在浏览器历史记录中向前或向后导航：router.go()

this.$router.go(1);  // 前进一页
this.$router.go(-1); // 后退一页

4.等价于 router.go(-1)，用于返回到上一个路由：router.back()

this.$router.back();

5.用于前进到下一个路由。：router.forward()

this.$router.forward();

在 Vue Router 中可以通过配置路由来选择 history 模式或 hash 模式。默认是 hash 模式，如果想要使用 history 模式，需如下配置：

const router = new VueRouter({
  mode: 'history', // 使用 history 模式
  routes: [
    { path: '/about', component: About },
    { path: '/contact', component: Contact }
  ]
});

总结：

安装与基本配置：
使用 npm 安装 Vue Router 4.x，确保与 Vue 3 的兼容性。
配置路由器实例，并将其集成到 Vue 应用中，通过 createRouter 创建路由对象并定义路由规则。
路由功能详解：

声明式路由配置：简单而直观地定义路径与组件的映射关系。
动态路由：通过路径参数实现灵活的路由匹配，适用于用户详情页等需求。
嵌套路由：通过路由嵌套实现复杂的视图结构，支持多层次的界面布局。
导航守卫与懒加载

导航守卫：利用路由钩子函数实现权限控制和数据预加载，为应用提供更好的用户体验。
路由懒加载：按需加载组件优化性能，减少初次加载时间。

滚动行为与路由模式：
自定义页面滚动行为，提升用户体验。
了解并配置路由的两种模式：history 和 hash 模式，根据需求选择合适的 URL 表现形式。
导航操作方法：
使用 router.push、router.replace 等方法进行编程式导航，灵活控制页面跳转。

ps:以上内容仅为本人对 vue3的个人理解，如有不足之处，欢迎大家指正与交流，共同进步。

原文地址：https://blog.csdn.net/llfxq/article/details/142876758

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：DAY47WEB 攻防-PHP 应用&文件上传&函数缺陷&条件竞争&二次渲染&黑白名单&JS 绕过
下一篇：堪比理科博士生的最强AI大模型：GPT-o1全面测评它来了

Web前端高级工程师培训：函数式编程
管道、组合取舍：管道及组合最大区别在于执行顺序的不同，数据流向不同，达到目的是类似的。可读性更强，js函数不管是否是纯函数都会有一个语义化的名称，更便于阅读。js是多范式编程语言，
阅读更多2024-10-18
前端如何在生成环境下实现自动检测更新
建立一个WebSocket连接，服务器在发布新版本时通过WebSocket向客户端发送更新通知。优点：实时性强，能够即时通知客户端更新。缺点：需要额外的服务器资源来维护WebSocket连接，且可能受
阅读更多2024-10-18
从零实现数据结构：堆的实现和简单堆排序
同理这里向下调整也是一样，需要注意的是这里的写法，我们先是假设左边的结点是小的，然后再用判断。如果不这样做，则需要将父节点和两个子节点进行比较，这样会造成多余的比较次数。当我们交换完成之后，发现依然不
阅读更多2024-10-18
webAPI中的排他思想、自定义属性操作、节点操作（配大量案例练习）
本文旨在帮助大家学习webAPI中的排他思想、自定义属性操作以及节点操作，里面加入了大量练习帮助掌握相关技术
阅读更多2024-10-18
Linux之实战命令41：lshw应用实例(七十五)
本篇目的：Linux之实战命令41：lshw应用实例lshw是 Linux 系统中的一个强大命令行工具，用于获取系统硬件的详细信息。与其他命令相比，lshw提供了更全面的硬件配置报告，涵盖了处理器、内
阅读更多2024-10-18
Nodemon 深入解析与使用
Nodemon 深入解析与使用指南Nodemon 是一个强大的开发工具，用于监控 Node.js 应用程序中的文件变更，能自动重启应用，极大提高开发效率
阅读更多2024-10-18
【Midjourney 中文版】想象的舞台
只需用中文输入你心中的画面描述，无论是梦幻般的仙境、未来感十足的城市景观，还是充满故事的人物形象，它都能迅速理解你的意图，并在瞬间将其转化为令人震撼的视觉图像。这种从文字到图像的神奇转变，仿佛为你的想
阅读更多2024-10-18
C语言 | Leetcode C语言题解之第492题构造矩形
C语言 | Leetcode C语言题解之第492题构造矩形
阅读更多2024-10-18
Github 2024-10-18Java开源项目日报Top9
根据Github Trendings的统计，今日(2024-10-18统计)共有9个项目上榜。
阅读更多2024-10-18
汽车3D动画外包还是自己动手渲染？
高质量的3D渲染往往需要大量的计算资源和时间，如何在保证效果的同时提高渲染效率，是制作过程中的一大挑战。通过将渲染任务提交到云渲染农场，你可以利用专业的渲染集群来完成工作，而你的本地计算机可以继续进行
阅读更多2024-10-18