vue——路由命名

最新推荐文章于 2024-08-16 20:15:52 发布

cc_xxo

最新推荐文章于 2024-08-16 20:15:52 发布

阅读量517

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/cc_xxo/article/details/123295932

版权

本文介绍了在Vue中如何处理嵌套路由，并展示了如何通过命名路由实现简洁的跳转。例如，在一个包含多级路由的配置中，利用`<router-link>`组件结合name属性，可以方便地进行页面间的导航，避免了长路径的困扰。

摘要由CSDN通过智能技术生成

在嵌套很多级路由时跳转就要编写很长的to或path给每个路由命名跳转时直接使用路由的名称即可。但是 只能用在跳转方式为对象的时候

routes: [
	{
		path: '/home',
		component: MyHome,
		children: [
			{
				path: 'news',
				component: MyNews
			},
			{
				path: 'message',
				component: MyMessage,
				children: [
					{
						name: 'HomeMessageDetail',
						path: 'detail',
						component: MyDetail
					},
				]
			},
		]
	},
]

<router-link :to="{name: 'HomeMessageDetail',}"></router-link>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

cc_xxo

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

vue路由全面详解（中）：路由命名、query参数、params参数、props配置、replace属性、编程式路由导航

m0_54861649的博客

02-21

1754

上篇博客vue路由全面详解（上）：基本使用、多级路由、工作模式……_czjl6886的博客-CSDN博客，我们对路由有了基本的认识与使用，今天我们就来看看路由更深入、更常见的用法。目录一、路由命名二、路由的参数 1.query参数 2.params参数三、路由的props配置四、replace属性五、编程式路由导航? 一、路由命名 1. 概念理解：路由命名，就是给路由映射的路径命一个名字 **2.好处：**可以简化路由的跳转 3.使用方法在route文件夹的index.js文件里面，添加n

Vue —— 路由

weixin_54966486的博客

03-18

663

路由下载 router 并使用： vue-router3 只能在 vue2 中使用 npm i vue-router@3 vue-router4 只能在 vue3 中使用 npm i vue-router@4 案例 router-link 写法 app.vue <template> <div> <h1>欢迎来到这里！！！</h1> <hr> <h1&gt.

参与评论您还未登录，请先登录后发表或查看评论

Vue单页面应用

weixin_44434230的博客

11-06

1294

** 1. SPA是什么 ** 单页Web应用（single page application，SPA），就是只有一个Web页面的应用，是加载单个HTML页面，并在用户与应用程序交互时动态更新该页面的Web应用程序单页面应用程序：只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要的数据.然后, 由页面中js解析获取的数据, 展示在页面中传统多页面应用程序：对于传统的多页面应用程序来...

【Vue3】命名路由

最新发布

又言又语

08-16

398

本文介绍 Vue3 中命名路由的基本写法。因为路由可被嵌套，所以路径path可能较长，导致在使用时非常不便，为解决此问题，Vue3 提供了命名路由功能，可以使用路由名称name代替路径path。

Vue命名路由

月光晒了很凉快的博客

09-17

239

【代码】Vue命名路由。

vue命名路由

Nikki_u的博客

03-27

565

场景1：重定向 App.vue <router-link to="/one"></router-link> <router-link to="/two"></router-link> <router-link :to="{name:'one'}"></router-link> <router-link :to="{name:'two'}"></router-link> main.js import .

vue-router命名路由

lixiaoyan_star的博客

04-18

214

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../node_modules/vue/dist/vue.js"></script> <script src=".....

vue——路由

weixin_52984349的博客

11-28

1795

vue——路由

vue手机端回退_Vue——路由回退至指定页面

weixin_39734184的博客

12-20

1522

先来引出一下遇到的问题：在做一个移动端支付页面，在付款页面点击支付按钮，支付失败时跳转至支付失败提示页面；支付成功时跳转至支付成功页面。在支付成功页面下，如果用户点击手机自带的“返回”键，就又会跳转至支付页面，这时，如果用户在不知情的情况下又点击了支付按钮，就会产生重复支付的情况。我们的需求是，如果用户支付成功的话，点击手机自带“返回”键应该跳转至上上一级页面；如果用户支付失败的话，点击手机自带“...

vue3.2 电商前台项目（二）—— 路由组件和非路由组件

ailsa_csdn的博客

03-14

2896

vue 3.2 版的电商前台项目（二）：路由组件和非路由组件介绍与搭建

Vue3路由——基本使用、动态路由、路由正则、重复参数、嵌套路由、编程式导航、命名路由、重定向、别名、路由模式与导航守卫

weixin_45732235的博客

11-16

780

Vue3路由

讲解vue-router之命名路由和命名视图

12-01

前言：前面我们把动态路由、嵌套路由等讲完了，说道完命名路由和命名视图，vue-router的基本使用方法就算是完篇了，还想仔细探究的同学可以去官网翻阅，加深理解。 1.首先来说说什么是命名路由？ ① 官方文档的解释：https://router.vuejs.org/zh/guide/essentials/named-routes.html 就是在routers配置路由名称的时候给路由定义不同的名字，这样的好处就是可以在使用router-link的to属性跳转路由的时候传一个对象从而实现与router.push一样的效果： <router-link :to="{ name: 'user',

云E办Springboot+vue——前端项目完整版（含源码）

08-10

5万+

本项目基于Vue+Spring Boot构架一个前后端分离项目。前端使用社区非常活跃的开源框架vue进行构建。受疫情的影响，许多企业由线上办公转为线下办公。随着线上办公的人数的增多，线上办公的优点逐步凸显：通过实现工作流程的自动化、节省企业办公费用、实现绿色办公，同时提升办公效率。前端使用的技术有： Vue、Vue-cli、Vuex、VueRouter、ElementUI、Axios、ES6、Webpack、WebSocket、font-awesome、js-file-download、vue-chat 项

vue 命名路由

weixin_47013351的博客

04-17

1129

当路由跳转路径path很长时，我们可以通过一个名称来标识一个路由，这样就可以简化很多，这就是命名路由。 const router = new VueRouter({ routes: [{ name: 'user1', path: '/about', component: User } }) <router-link>跳转命名路由 <router-link to="/about">跳转</router-link> 上面是路由跳转

Vue Router系列之命名路由

老__L的博客

12-11

1179

命名路由

Vue Router 命名路由

qq_40930841的博客

05-02

786

一、为什么要使用命名路由使用路由时，一般会先在routes属性中配置路由匹配规则，然后在页面中使用的to属性跳转到指定目标地址。但这种方式存在一些弊端，例如，当目标地址比较复杂时，不便于记忆；当地址发生变化时，需要同步修改所有使用了该地址的代码，会增加开发的工作量。为此，VueRouter提供了命名路由。二、命名路由的语法2.1使用定义路由匹配规则在定义路由匹配规则时，使用name属性为路由匹配规则定义路由名称，即可实现命名路由。命名路由的name。

030_vue命名路由

aihiao的专栏

02-13

275

1. 命名路由 1.1. 命名路由, 通过name属性给当前路由指定一个别名user_alias。 1.2. :to绑定属性, 也是使用name指定路由别名, params指定参数。 1.3.代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>命名路由</title> </head> <body>...

vue路由之命名路由

六国破灭，非兵不利，战不善，弊在赂秦。赂秦而力亏，破灭之道也。或曰：六国互丧，率赂秦耶？曰：不赂者以赂者丧，盖失强援，不能独完。故曰：弊在赂秦也。秦以攻取之外，小则获邑，大则得城。较秦之所得，与战胜而得者，其实百倍；诸侯之所亡，与战败而亡者，其实亦百

08-22

1905

一、通过:to="{name:'other'}"的命名。 1、添加 :to="{name:'other'}" <router-link to="/home" tag="span">首页</router-link> <router-link to='/about' tag="span">关于</rout

Vue Router：命名路由与命名视图详解

本篇文章主要讲解了Vue Router中的两种重要特性：命名路由和命名视图。命名路由是Vue Router中的一种高级功能，它允许我们在定义路由时为它们赋予独特的名称，便于通过`router-link`组件的`to`属性以对象形式传递，...