router-link的tag属性以及router-view的复用

最新推荐文章于 2026-06-21 13:50:02 发布
原创 最新推荐文章于 2026-06-21 13:50:02 发布 · 9.6k 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文介绍了如何在Vue.js项目中使用Vue Router进行导航和路由配置。通过自定义tag属性可以改变链接的表现形式，同时利用命名视图特性来实现更复杂的组件加载策略。

<router-link to="/"  tag="div" class="nav-link">主页</router-link>

 

可用tag改变默认元素

 

 

 

如果 <router-view>设置了名称，则会渲染对应的路由配置中 components 下的相应组件。查看 命名视图 中的例子。

 

 

49. VUE router-link 标签的属性讲解 和 不通过router-link 实现路由跳转
Bi-Hu的博客
08-12 1361
1.tag 属性 router-link 这个标签如果我们不想让他渲染成 a标签 ，那么我们就可以 tag 属性 ，可以自定义渲染成自己想要的组件： 可以发现 a 标签渲染成了 按钮。 2.replace属性 我们发现 你点击了router-link 标签 然后跳转切换视图的时候，他默认保留历史的 即可以前进/后退，那么证明默认用的是 pushState ,我们如果不想让他可以前进、后退...
router-link tag属性问题
liu250696676的博客
07-02 8299
router-link使用tag属性出现警告问题,如图所示 控制台错误消息为： [vue-router] <router-link>'s tag prop is deprecated and has been removed in Vue Router 4. Use the v-slot API to remove this warning: https://next.router.vuejs.org/guide/migration/#removal-of-event-and-tag-
Vue 路由的基本使用
weixin_30247781的博客
07-30 330
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-eq...
“router-link”各种属性解释
weixin_43258184的博客
02-09 1295
1.”:to” 属 性 相当于a标签中的”herf”属性，后面跟跳转链接所用 Home Home 2.”replace” 属 性 replace在routre-link标签中添加后，页面切换时不会留下历史记录 3.”tag” 属 性 具有tag属性的router-link会被渲染成相应的标签 Home Home 此时页面的li同样会起到a链接跳转的结果，vue会自动为其绑定点击事件，并跳转页面 4.”active-class” 属 性 这个属性是设置激活链接时class属性，也就是当前页面所有与当前地
关于vue3 router-link的tag属性不生效的问题
Yydemo1的博客
10-21 1174
以上代码不生效，因为vue3.x版本对应的vue-router4.x版本已经不支持tag写法，以下写法替换。虽然麻烦了一点点，但是更方便控制样式和结构了。
vue-router
dianbi9787的博客
03-15 111
vue-router HTML <router-link to="/" tag='a'>:to可以绑定属性进行更改,在path中name一个名字,:to{name:'path.name'}</router-link> <ro...
Vue - vue-router
sinat_33184880的博客
02-20 276
Vue.js通过组合组件来组成应用程序，使用 VueRouter将组件映射到路由 (routes)，然后告诉 VueRouter 在哪里渲染它们 声明式导航 使用<router-link>组件来导航，通过传入 `to` 属性指定链接，<router-link> 默认会被渲染成一个 `<a>` 标签，可以使用`tag`属性指指定渲染标签 // router...
node&npm&nrm&nvm
pscool的博客
12-31 1593
Node.js 是一个能够在服务器端运行 JavaScript 的开放源代码、跨平台 JavaScript 运行环境。Node.js 由 Node.js 基金会持有和维护，并与 Linux 基金会有合作关系。Node.js 采用 Google 开发的 V8 运行代码，使用事件驱动、非阻塞和异步输入输出模型等技术来提高性能，可优化应用程序的传输量和规模。这些技术通常用于数据密集的即时应用程序。Node.js 大部分基本模块都用 JavaScript 语言编写。
Rails嵌套路由原理：从路由编译到参数注入的完整生命周期
最新发布
weixin_30689307的博客
06-21 437
嵌套路由是Web开发中表达资源层级关系的基础技术概念，其核心在于URL路径语义化、父级参数自动注入与控制器上下文隔离。在Ruby on Rails中，resources嵌套并非简单拼接路径，而是通过DSL编译生成带约束的路由集合，并在请求进入控制器前完成父资源查找与类型转换。这种设计既保障了数据访问的安全边界（如防止水平越权），也带来了深层嵌套的性能代价和维护复杂度。典型应用场景包括文章评论、订单子项、权限资源树等需强归属语义的业务模块。本文深入拆解Rails 7.1+中嵌套路由的编译机制、参数流转链路及多
router-link常用属性
秋来九月八
11-05 3251
totag属性replace属性native修饰符active-class属性appendeventexactrouter-link 是 Vue Router 提供的用于导航的组件，它可以用来创建链接到不同路由的链接。
router-link标签
远方不远
09-30 2071
router-link标签 在vue1.0版本中的仍然用a标签来实现链接跳转功能，但链接地址与html中不同，它是采用v-link属性来控制。但是在2.0版本中a标签就被替换成了rount-link属性，但是最终在页面上显示还是会被渲染成a标签。接下来将要详细的介绍该属性中的各个值的用法 router-link属性值详解 （1）":to" 属性值 这个属性值就相当于a标签中的"herf"属性，后面的内容为跳转链接的内容 ```<router-link :to="http://www.gxl
jQuery 的设置属性值，和获取属性值，attr()和prop()；
F_x_i_a_o_l_i_n_g_的博客
09-25 737
jQuery 的设置属性值，和获取属性值，attr()和prop(); attr(“属性”)：获取属性值 attr(“属性”，“属性值”)：设置属性的属性值 prop(“属性”)：获取属性值 prop(“属性”，“属性值”)：设置属性的属性值 两者的区别 attr可以获得和定义自定义的属性和属性值，prop不行，但是attr已经不进行维护啦，所以推荐使用prop ...
Vue-Router API参考
赵迪的博客
01-18 485
Vue Router API 参考 1. &amp;amp;lt; router-link&amp;amp;gt; Props # tag 类型: string 默认值: &amp;quot;a&amp;quot; 有时候想要 &amp;amp;lt;router-link&amp;amp;gt; 渲染成某种标签，例如 &amp;amp;lt;li&amp;amp;gt;。 于是我们使用 tag prop 类指定何种标签，同样它还是会监听
router-link使用详解
热门推荐
weixin_43905830的博客
05-06 3万+
router-link组件的属性 to、replace、append、tag、active-class、exact、event、exact-active-class。 属性介绍 1、to（必选参数）：类型是string/location //字符串 <router-link to="path（路径）">AAAA</router-link> //对象 <router-...
Vue中router-link中tag和vue3中替代写法
weixin_45344741的博客
09-03 1091
vue3中tag被废弃 ，使用v-slot实现。tag指定router被渲染成什么属性。
vue 中router-link属性设置，新手学习web前端开发
2401_84094979的博客
04-04 1067
设置 replace 属性的话，当点击时，会调用而不是，于是导航后不会留下 history 记录。append-类型: boolean默认值: false设置 append 属性后，则在当前（相对）路径前添加基路径。例如，我们从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/btag类型: string默认值: “a”有时候想要渲染成某种标签，例如。于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航。
router-link的tag
chelflan's blog
01-08 4568
tag 类型: string 默认值: “a” 有时候想要 渲染成某种标签，例如 。 于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航。 foo foo ...
router-link的属性
桥的博客
11-03 340
属性 to <router-link to='home'> 属性tag tag可以指定<router-link>之后渲染成什么组件,比如下面的代码会被渲染成一个<li>元素,而不是<a> <router-link to="/home" tag='li'> 也可以渲染成一个button,div等等组件 属性 replace replace不会留下history记录,所以指定replace的情况下,后退键返回不能返回到上一个页面中 使.
【router-link详细介绍】
cz88888888666的博客
01-20 1万+
是一个用于在 Vue 应用中创建导航链接的组件，由 Vue Router 提供，这个组件用于在不刷新页面的情况下导航到不同的 URL，并且支持 HTML History API，使用。不仅仅是一个链接，还能够根据当前路由的状态调整样式，比如当链接指向当前路由时，可以自动设置一个激活状态的样式类。此属性必须设置，它决定了导航的目标路由，其值可以是一个字符串或者一个对象，当使用对象时，可以设置更多选项如。的默认值，可以通过这个 prop 设置，当链接的完整路径完全匹配当前路径时应用的 CSS 类名。
vue-03-路由-tag属性
qq_40792800的博客
03-31 2527
在上一章的路由的笔记中，讲到了 router-link 这么个标签，我们在页面上审查元素看到的其实是一个 a 标签，但是我们可以使用 tag 这个属性来设置我们的自定义标签，比如说我想让我们的 router-link 默认不是 a 标签，那么我们只需要在 这个标签上加上 tag 这个属性，将其值设置为你想要的 自定义标签即可。在替换为自定义标签之后，会失去a标签的特性，但是是能进行跳转的 ，同时也...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值