当前位置： 首页 > article >正文

Vue 3中的路由（Router）详解

article 2025/1/22 0:35:30

在前端开发中，路由是构建单页应用程序的核心慨念之一。允许应用根据URL的变化动态地渲染不同的组件或页面。Vue.js提供了官方的路由管理工具——Vue Router。接下来这篇文章将逐步讲解Vue 3 中的路由概念以及使用。

一、什么是路由？

路由其实就是 URL 与应用程序视图之间的映射关系。
在传统的多页应用里面，每次跳转都是向服务器发送请求，服务器返回新的页面的过程。但是在  SPA 中，页面并不会刷新，而是根据 URL 的变化，动态地加载相应的组件，为实现这一效果，就需要路由系统的管理。

Vue Router 的核心概念

 Vue Router 的核心概念：介绍 | Vue Router

1.路由器（ Router )

这个路由器并不是网络服务中用于转发路由的路由器，而是 SPA 中路由系统的核心的控制页面映射的路由器。
它的功能包括：

  • 监听 URL 的变化
  • 根据定义的 路由规则，映射到对应的组件。
  • 提供导航方法，控制页面跳转。
2.路由（Route）

路由是路径（Path）与组件（compontent）的对应关系。
一个典型的路由定义包括：

  • path：URL当中的路径部分
  • compontent:当路径匹配时要渲染的组件

二、如何在 Vue 3 中使用 Vue Router

1.安装 Vue Router

在开始之前，需要安装 Vue Router：

npm install vue-router@4

2. 创建路由器实例

在项目的入口文件（如 router/index.js）中：

import { createRouter, createWebHistory } from 'vue-router';

// 导入需要的组件
import Home from './components/Home.vue';
import About from './components/About.vue';

// 定义路由
const router = [
  { path: '/', component: Home },
  { path: '/about', component: About },
];

// 创建路由器实例
const router = createRouter({
  history: createWebHistory(), // 使用 HTML5 模式
  router, // 路由配置
});

export default router; // 以 router 暴露出去

在项目的入口文件（如 main.js）中：

import { createApp } from 'vue';
import App from './App.vue';
import router from "./router/index.js"

// 创建并挂载应用
const app = createApp(App);
app.use(router);
app.mount('#app');

3. 定义路由组件:

在 components 目录下创建 Home.vue 和 About.vue：

<!-- Home.vue -->
<template>
  <div>
    <h1>首页</h1>
  </div>
</template>

<script setup>
export default {
  name: 'Home',
};
</script>

<!-- About.vue -->
<template>
  <div>
    <h1>关于我们</h1>
  </div>
</template>

<script setup>
export default {
  name: 'About',
};
</script>

4. 使用 <router-view> 显示路由组件

在 App.vue 中：

<template>
  <div id="app">
    <nav>
      <router-link to="/">首页</router-link>
      <router-link to="/about">关于我们</router-link>
    </nav>
    <router-view />
  </div>
</template>

5. 路由跳转（从 A 页面跳转到 B 页面）

使用 <router-link> 创建导航链接，或者在脚本中使用编程式导航：

<!-- Home.vue -->
<template>
  <div>
    <h1>首页</h1>
    <!-- 路由跳转：点击事件进行跳转 -->
    <el-button @click="goToAbout">跳转到 about 页面</el-button>
  </div>
</template>

<script setup>
//引入钩子并创建钩子函数
import { useRouter } from 'vue-router';
const router = useRouter();

//跳转
function goToAbout() {
    router.push({
        path:'/about', //目标路由
    )}
}
</script>

6.路由传参（当一个页面跳转到另一个页面时将指定数据也一起传过去）

Home 页面将数据传输给 About 页面

<!-- Home.vue -->
<template>
  <div>
    <h1>首页</h1>
    <!-- 路由跳转：点击事件进行跳转 -->
    <el-button @click="goToAbout">跳转到 about 页面</el-button>
  </div>
</template>

<script setup>
//引入钩子并创建钩子函数
import { useRouter } from 'vue-router';
const router = useRouter();

//跳转
function goToAbout() {
    router.push({
        path:'/about', //目标路由
        //跳转页面附带参数id/name到about页面
        query:{
            id:12132,
            name:"带参数见你"
        }
    )}
}
</script>

About 页面接受并渲染 Home 的数据

我们通过引入路由并打印路由来获取到传过来的数据（在控制台查看）

<!-- About.vue -->
<template>
  <div>
    <h1>关于我们</h1>
  </div>
</template>

<script setup>
//引入路由
import { useRoute } from 'vue-router';
const route = useRoute();
console.log(route); //打印此路由
</script>

三、进阶概念

1. 动态路由匹配（在router/index.js）中：

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

在组件中获取路由参数：

<!-- About.vue -->
<template>
  <div>
    <h1>关于我们</h1>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
//引入路由
import { useRoute } from 'vue-router';
const route = useRoute();
console.log(route); //打印此路由

 coconst userId = ref(''); 

 // 在组件挂载时获取路由参数
 onMounted(() => {
    userId.value = route.params.id; // 将路由参数 id 赋值给 userId
   });
</script>

2. 嵌套路由

定义嵌套路由（在router/index.js）中：

const router = [
  {
    path: '/user/:id',
    component: User,
    children: [
      {
        path: 'profile',
        component: UserProfile,
      },
      {
        path: 'posts',
        component: UserPosts,
      },
    ],
  },
];

在父组件模板中：

<template>
  <div>
    <h2>用户页面</h2>
    <router-view></router-view> <!-- 渲染子路由组件 -->
  </div>
</template>

3. 导航守卫

全局前置守卫：

router.beforeEach((to, from, next) => {
  // 例如，验证用户是否已登录
  if (to.path === '/protected' && !isLoggedIn()) {
    next('/login');
  } else {
    next();
  }
});

路由独享守卫：

const router = [
  {
    path: '/admin',
    component: Admin,
    beforeEnter: (to, from, next) => {
      // 仅管理员可访问
      if (isAdmin()) {
        next();
      } else {
        next('/login');
      }
    },
  },
];

组件内守卫：

<script setup>
  beforeRouteEnter(to, from, next) {
    // 在路由进入前调用
    next();
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但组件被复用时调用
    next();
  },
  beforeRouteLeave(to, from, next) {
    // 在路由离开前调用
    next();
  },
</script>

4. 懒加载路由

通过动态导入实现路由组件的懒加载：

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

5. 命名路由和命名视图

命名路由：

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

//在模板中
<template>
// 导航到命名路由
<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
 onMounted(()=>{
   router.push({name:'user',params:{id: 121} });
});
<script>
</template>

命名视图：

const router = [
  {
    path: '/views',
    components: {
      default: ViewMain,
      sidebar: ViewSidebar,
    },
  },
];

// 在模板中
<template>
  <router-view></router-view>
  <router-view name="sidebar"></router-view>
</template>

总结：这篇文章详细地讲述了vue3中路由的各种使用和使用的场景。彼此学习~希望对大家对vue3路由的基本使用有帮助。


http://www.kler.cn/a/512782.html

相关文章：

  • JDBC实验测试
  • Git处理冲突详解
  • HTML `＜head＞` 元素详解
  • 第12章：Python TDD完善货币加法运算（一）
  • 一文了解如何在Qt中间集成Halcon窗口并在子线程显示（附工程源码下载链接）
  • 鸿蒙系统 将工程HarmonyOS变成OpenHarmony
  • VIM 的 YCM 插件
  • JDK长期支持版本（LTS）
  • Ubuntu 22.04 TLS 忘记root密码，重启修改的解决办法
  • CVPR 2024 图像、视频处理总汇（视频字幕、图像超分辨率、图像分类和压缩等）
  • HotSpot JVM中的两种模式
  • 大华Java开发面试题及参考答案 （上）
  • Java中List集合的面试试题及答案解析
  • Flask：后端框架使用
  • 【Linux】Linux命令：curl
  • 论文笔记-NeruIPS2024-LLM-ESR
  • JavaEE：多线程进阶
  • vue3 hooks例子
  • Go语言-学习一
  • 网络安全：信息时代的守护者
  • JWT（JSON Web Token）
  • ChemLLM化学大模型再升级，AI助力化学研究
  • 【Python使用】嘿马头条项目从到完整开发教程第10篇：APScheduler定时任务,1. 什么是RPC【附代码文档】
  • 【2024年华为OD机试】(A卷,100分)- 完美走位 （Java JS PythonC/C++）
  • 周末总结(2024/01/18)
  • 面试--你的数据库中密码是如何存储的？