Vue学习笔记之Vue中的路由使用

最新推荐文章于 2025-05-03 22:05:24 发布
最新推荐文章于 2025-05-03 22:05:24 发布
阅读量184 收藏
点赞数
分类专栏： Web前端笔记 文章标签： vue js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_39826207/article/details/105194162
版权
这篇Vue学习笔记详细介绍了路由的使用，包括路由嵌套、重定向和两种参数传递方式，并探讨了路由守卫及其钩子函数的应用，如进入和离开路由时的执行方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Vue学习笔记之Vue中的路由使用

路由嵌套

在router.js中，添加对应路由：

在html中添加路由view：

对应的跳转路由地方，添加router-link：

路由重定向

在路由配置文件中，使用redirect即可。

对应的页面：

了解本专栏 订阅专栏 解锁全文 超级会员免费看
推荐9个web前端模板框架
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 优快云 记录学习心得和笔记内容。
05-02 2万+
1、AdminLTE 基于Bootstrap3.x的免费的后台管理模板框架。Github star数量达到了34.3k。 GitHub项目地址：https://github.com/ColorlibHQ/AdminLTE 在线演示：https://adminlte.io/themes/AdminLTE/index2.html 演示效果： 2、Vue-Element-Admin ...
【CSS笔记】CSS布局之五种定位方式（静态、相对、绝对、固定、粘性）
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 优快云 记录学习心得和笔记内容。
08-18 5925
设置元素的【position】属性值等于【absolute】绝对定位之后，如果没有设置【top，left、right、bottom】属性，那么就会默认都是0，这个时候元素就会移动到浏览器屏幕可见区域的左上角位置。relation相对定位，这个属性是相对于元素自身位置定位的，也就是说，某个元素使用相对定位之后，它是以没有使用相对定位之前显示的位置为参考点，上下左右移动多少距离，下面看个案例。CSS也支持相对于某个元素，进行绝对定位，也就是说，可以自定义当前元素是以哪个元素为参考点，从而完成绝对定位。...
Vue3路由基本使用（学习笔记）
专研技术的大学生:会点Java和前端
08-24 1712
vue3路由的基本使用。
VUE学习笔记
qq_31210287的博客
12-05 1507
vue学习笔记
Vue学习笔记-命名路由
theLuckyLong的博客
11-30 378
如何理解：相当于给路径起别名。来解析js对象，对象中声明。使用命名路由时,要使用。
Vue3学习笔记2——路由守卫
最新发布
green_pine_的博客
05-03 336
vue3中路由守卫的基本函数操作
Vue.js 学习笔记
m0_72686196的博客
03-01 2307
在前端开发领域，Vue.js 以其轻量级、易上手和高性能的特点，赢得了众多开发者的青睐。作为一名前端小白，我也踏上了学习 Vue.js 的旅程。本文将分享我的学习笔记，涵盖 Vue.js 的基础概念、常用指令、组件化开发、计算属性与侦听器、路由和状态管理等知识点，并附上代码示例，希望能帮助到同样在学习 Vue.js 的你。Vue.js 是一款用于构建用户界面的渐进式 JavaScript 框架。它采用直观的模板语法，降低了学习成本，并通过响应式数据绑定，实现了数据与视图的自动同步更新。
Vue学习笔记-路由的基本使用
theLuckyLong的博客
11-30 1461
实现组件切换，在App.vue中编写如下内容(active-class类用于动态地为选中的标签添加样式)在src路径下创建router文件夹，并创建index.js文件，该文件用于配置路由规则。在main.js中导入vue-router模块，并且使用vue-router插件。vue2 要下载vue-router3。vue3 要下载vue-router4。指定展示切换的组件的位置。
【Vue-路由】学习笔记
Tom299的博客
04-07 1052
如果嫌弃router-link的两个高亮类名太长，我们可以自定义匹配类名我们可以在创建路由对象时，额外配置两个配置项和即可// 创建路由对象// 配置路由routes: [],// 自定义匹配类名})传参方式使用场景配置动态路由跳转获取查询参数传参多个参数无to=“/path?参数名=值&参数名2=值”$route.query.参数名动态路由传参一个参数/path/:参数名to=“/path/参数值”$route.params.参数名两种跳转方式跳转方式区别。
尚硅谷vue3学习笔记
2302_77862232的博客
01-07 2888
setup`是`Vue3`中一个新的配置项，值是一个函数，它是 `Composition API` ，组件中所用到的：数据、方法、计算属性、监视......等等，均配置在`setup`中。特点如下：- `setup`函数返回的对象中的内容，可直接在模板中使用。- `setup`中访问`this`是`undefined`。- `setup`函数会在`beforeCreate`之前调用，它是“领先”所有钩子执行的。姓名：{{ name }}
Vue2使用Vue CLI学习笔记
m0_52458424的博客
09-05 1494
学习vue2相关知识，如构建项目，组件注册，组件之间的通信，ref属性，自定义项目创建，eslint，项目打包等
Vue学习笔记进阶篇之vue-router安装及使用方法
12-03
在实际开发中，还可以使用 Vue Router 的高级功能，比如嵌套路由、动态路由匹配、路由守卫等，以满足复杂的应用场景需求。 总的来说，Vue Router 是 Vue.js 应用不可或缺的一部分，它提供了强大的路由管理功能，让...
vue学习笔记 学习笔记
05-07
这篇学习笔记主要涵盖了Vue的核心概念，包括组件通信、非父子组件间通信以及路由管理和状态管理。 ### 父子组件通信 #### 1) Props和`$emit` **Props** 是Vue中父组件向子组件传递数据的主要方式。在父组件中定义...
vue学习笔记，B站黑马程序员的javaweb
11-05
Vue学习笔记 Vue是一个基于JavaScript的渐进式框架，用于构建用户界面。下面是关于Vue的学习笔记。 一、Vue基本知识 在Vue中，以点vue结尾的文件称为组件文件，包含三部分：template、script、style。template是...
vue学习笔记
11-22
本学习笔记将涵盖Vue的基础概念、核心特性以及常见应用场景，帮助初学者建立起对Vue的全面理解。 一、Vue.js简介 Vue.js的核心理念是通过声明式的模板语法来简化DOM元素的更新，实现数据驱动视图。它采用MVVM...
Vue解析markdown字符串，并且将其展示到页面(代码高亮+代码行号显示)
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 优快云 记录学习心得和笔记内容。
10-24 5778
Vue解析markdown字符串，并且将其展示到页面(代码高亮+代码行号显示)，具体步骤如下： (1) 安装依赖 // marked用于将markdown转换成html cnpm install marked -S // 用于代码高亮显示 cnpm install highlight.js -S // 代码行号显示插件 cnpm install highlightjs-line-numbers.js (2) 在main.js文件中引入highlight.js import highlight
【CSS笔记】CSS选择器的优先级（权重）
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 优快云 记录学习心得和笔记内容。
08-20 3369
在CSS里面，如果有多个选择器作用在同一个元素上面，那么会按照上面的优先级顺序进行样式的选取，也就是优先级越高，浏览器最终就显示哪种样式。通过上面五个选择器的权重值，就可以计算出任意组合的权重值了，权重值就是将所有的权重相加。对于哪些组合选择器，我们可以通过计算选择器的权重来查看优先级，权重越大，优先级越高。
【表格动态列】Vue + ElementUI实现表格多行表头以及表格动态列的功能
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 优快云 记录学习心得和笔记内容。
03-03 2854
这周工作中，遇见了一个表格动态列的需求，这记录一下如何使用Vue和ElementUI实现表格多行表头以及表格动态列的功能。
【CSS笔记】CSS实现后台管理系统主界面布局
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 优快云 记录学习心得和笔记内容。
08-19 2339
【CSS笔记】CSS实现后台管理系统界面。
Vue2学习笔记与实战案例解析
标题直接指出了内容的主要方向，即对Vue2框架的学习笔记和相关的实践案例。‘vue2笔记’部分可能包含对框架基础、响应式原理、指令、组件、路由、状态管理Vuex等核心特性的梳理和解释。而‘案例’部分则通过实际的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Mr.小朱同学

随心赞赏，助力前行

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值