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

最新推荐文章于 2025-06-22 15:14:23 发布

原创最新推荐文章于 2025-06-22 15:14:23 发布 · 9.5k 阅读

0 ·

CC 4.0 BY-SA版权

vue笔记专栏收录该内容

38 篇文章

订阅专栏

本文介绍了如何在Vue.js项目中使用Vue Router进行导航和路由配置。通过自定义tag属性可以改变链接的表现形式，同时利用命名视图特性来实现更复杂的组件加载策略。

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

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

可用tag改变默认元素

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

一个柠檬

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

前端学习（1519）：vue-router-routerlink-tag激活样式

歌谣的博客

06-22

380

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head>  <.

49. VUE router-link 标签的属性讲解和不通过router-link 实现路由跳转

Bi-Hu的博客

08-12

1282

1.tag 属性 router-link 这个标签如果我们不想让他渲染成 a标签，那么我们就可以 tag 属性，可以自定义渲染成自己想要的组件：可以发现 a 标签渲染成了按钮。 2.replace属性我们发现你点击了router-link 标签然后跳转切换视图的时候，他默认保留历史的即可以前进/后退，那么证明默认用的是 pushState ,我们如果不想让他可以前进、后退...

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

ACL 2025 | 无需训练的“标签路由”方案，打造超级LLM大脑！清华&百度最新力作TagRouter横扫13项基线，开放域文本生成任务效率飙升！

最新发布

一位安分的码农的博客

06-22

556

《模型路由新范式TagRouter：清华&百度提出无需训练的多LLM协作方案》摘要：清华大学与百度智能云团队联合推出TagRouter，创新性地解决了多LLM协同中的效率与成本问题。该系统通过标签驱动机制，无需训练即可实现智能路由：首先将用户查询标签化，再评估各模型在不同标签下的能力，最终综合性能和成本进行分流。TagRouter具有三大优势：1) 完全无需训练，适配模型快速迭代；2) 在百度BCUQ数据集上超越13项主流基线，性能指标创新高；3) 支持多种任务类型，决策过程透明可解释。该方案为大

router-link的tag

chelflan's blog

01-08

4401

tag 类型: string 默认值: “a” 有时候想要渲染成某种标签，例如。于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航。 foo foo ...

Vue router之router-link属性

Mountains_river的博客

08-03

546

router-link标签在Vue router中是很常用的标签下面我们来了解一下有关于他的属性 <router-link to="/home">首页</router-link> <router-link to="/about">关于</router-link> 1.tag属性 to属性会将router-link渲染成a标签，但是如果我们想将router-link渲染成button等其他标签的时候我们该怎么做呢？ <route

router-link标签

远方不远

09-30

1955

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

路由&多视图单页应用&router-link相关属性

qq_64001795的博客

09-24

800

单页Web应用（single page application，SPA），就是只有一个Web页面的应用，是加载单个HTML页面，并在用户与应用程序交互时动态更新该页面的Web应用程序单页面应用程序：只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要的数据.然后, 由页面中js解析获取的数据, 展示在页面中传统多页面应用程序：对于传统的多页面应用程序来说, 每次请求服务器返回的都是一个完整的页面优势减少了请求体积，加快页面响应速度，降低了对服务器的压力。

前端入门之(vue-router全解析三)

vv_bug

09-27

1318

上一节前端入门之(vue-router全解析二)我们带着vue-router的push方法走了一遍源码,然后还分析了router-view的源码,最后还差router-link组件没有分析了,我们今天继续vue-router解析. 我们在源码中找到router-link组件的代码: var Link = { name: 'router-link', props: { to: { ...

vue-router总结

weixin_47450807的博客

02-20

4629

一、前言本篇博客主要是总结一下vue-router，将总结一下vue-router中的常用的api。二、认识前端路由路由其实是网络工程中的一个术语，在架构一个网络时，非常重要的两个设别是路由器和交换机。当然，目前在我们生活中路由器也是越来越被大家所熟知，因为我们生活中都会用到路由器,事实上，路由器主要维护的是一个映射表，映射表会决定数据的流向。路由的概念在软件工程中出现，最早是在后端路由中实现的，原因是web的发展主要经历了这样一些阶段：后端路由阶段，前后端分离阶段，单页面复应用(SPA)阶段。一

Vue Router 官方文档（一）==起步==、动态路由匹配、嵌套路由、编程式的导航（history）、命名路由、命名视图（`router-view`）、重定向和别名、路由组件传参（prop解耦）、

qq_43456781的博客

10-11

1073

Vue Router 官方文档（一）起步、动态路由匹配、嵌套路由、编程式的导航（history）、命名路由、命名视图（router-view）、重定向和别名、路由组件传参（prop解耦）、HTML5 History 模式（ mode: ‘history’）文章目录Vue Router 官方文档（一）==起步==、动态路由匹配、嵌套路由、编程式的导航（history）、命名路由、命名视图（`router-view`）、重定向和别名、路由组件传参（prop解耦）、HTML5 History 模式（ mode:

vue-router(3.5.1)源码梳理

Caristop3_走在前端这条大道上

04-09

3304

如何理解vue-router源码？ vue-router 源码分析 date: 2021-03-26 1. import Vue VueRouter 进来 2. 使用Vue.use(VueRouter) 来进行router的install -> 使用mixin混入每个组件钩子“beforeCreate”&“destroyed”

router-link属性 tag replace active-class go

wushen的博客

07-21

290

vue-route跳转方法有两种，第一种方法是使用内置的<router-link>组件，它会被渲染成一个 a 标签 <template > <div> <h1>首页</h1> <router-link to="/about>跳转到about</router-link> </template> 它的用法与一般的组件一样，to是一个prop，指定需要跳转的路径，当然.

Vue-Router API参考

赵迪的博客

01-18

421

Vue Router API 参考 1. &amp;lt; router-link&amp;gt; Props # tag 类型: string 默认值: &quot;a&quot; 有时候想要 &amp;lt;router-link&amp;gt; 渲染成某种标签，例如 &amp;lt;li&amp;gt;。于是我们使用 tag prop 类指定何种标签，同样它还是会监听

router-link tag属性出现控制台警告问题

GoAyano的博客

08-14

971

router-link的tag属性

router-link tag属性问题

liu250696676的博客

07-02

8163

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-

关于vue3 router-link的tag属性不生效的问题

Yydemo1的博客

10-21

1059

以上代码不生效，因为vue3.x版本对应的vue-router4.x版本已经不支持tag写法，以下写法替换。虽然麻烦了一点点，但是更方便控制样式和结构了。

router-link的属性

桥的博客

11-03

290

属性 to <router-link to='home'> 属性tag tag可以指定<router-link>之后渲染成什么组件,比如下面的代码会被渲染成一个<li>元素,而不是<a> <router-link to="/home" tag='li'> 也可以渲染成一个button,div等等组件属性 replace replace不会留下history记录,所以指定replace的情况下,后退键返回不能返回到上一个页面中使.

Vue 路由的基本使用

weixin_30247781的博客

07-30

292

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-eq...

vue 中router-link属性设置，新手学习web前端开发

2401_84094979的博客

04-04

966

设置 replace 属性的话，当点击时，会调用而不是，于是导航后不会留下 history 记录。append-类型: boolean默认值: false设置 append 属性后，则在当前（相对）路径前添加基路径。例如，我们从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/btag类型: string默认值: “a”有时候想要渲染成某种标签，例如。于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航。

router-link组件的tag属性

06-09

`router-link` 组件是 Vue Router 中提供的组件，用于生成链接，它的 `tag` 属性用于指定 `router-link` 渲染为哪种标签。默认情况下，`router-link` 组件会渲染为 `<a>` 标签，但是有些情况下，我们可能需要将其渲染为其他标签，比如 `<button>`。这时候就可以使用 `tag` 属性来指定要渲染的标签。例如，如果要将 `router-link` 渲染为一个按钮，可以这样写： ```html <router-link tag="button" to="/foo">Go to Foo</router-link> ``` 这样 `router-link` 就会被渲染为一个按钮，点击它会触发路由跳转到 `/foo` 页面。除了 `<a>` 和 `<button>` 标签，`router-link` 还可以渲染成其他标签，比如 `<li>`、`<div>` 等。根据需要选择合适的标签即可。