router-link属性补充

最新推荐文章于 2023-08-05 01:45:14 发布

xiangyizhixuexi

最新推荐文章于 2023-08-05 01:45:14 发布

阅读量116

点赞数

本文链接：https://blog.youkuaiyun.com/xiangyizhixuexi/article/details/118159490

版权

还有一些其他属性:

tag:tag可以指定之后渲染成什么组件，比如渲染成一个button按钮

replace:replace不会留下history记录，所以指定replace的情况下。后退键返回不能返回到上一个页面。

active-class:当对应的路由匹配成功时，会自动给当前元素设置一个router-link-active的class，设置active-class可以修改默认的名称。

比如actvie-class = 'active' 则可以将class的名称改为active，但这种方法只能给对应的router-link进行修改。如图：

如果要给所有的router-link进行修改，则需要在对应的router文件夹里面的index.js文件中，在最后的router对象里面添加一个属性linkActiveClass且给这个属性赋值你想要的class名称即可。

如图：

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

xiangyizhixuexi

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Vue-Router的使用详解

nanxing的博客

07-07

1085

Vue-Router的使用详解认识路由渲染 & 路由URL的hash & HTML5的History使用 vue-router基本使用其他小补充router-link属性路由懒加载 (常用)动态路由基本使用获取动态路由的值匹配多个参数NotFound路由的嵌套代码实现路由跳转query方式的参数发送接收router-link的补充router-link的插槽router-view的补充router-view的插槽动态添加路由路由守卫认识路由渲染 & 路由后端渲染 & 前

Vue--》路由vue-router的使用讲解

ztK63LrD的博客

12-15

1152

npm7 以上的版本，新增了一个对等依赖的特性，在以前的版本上，只会显示警告，但是还是可以安装成功，然而在新的版本是，npm 安装依赖则会直接报错，无法安装，这也是为了应用更加健壮而加的新的特性吧！当安装和配置了 vue-router 后，就可以使用 router-link 来替代普通的a链接了，使用router-link后，就不用再书写a链接必须写的 # 了。在上文介绍的hash地址中，/ 后面的参数项，叫做路径参数，需通过 this.$route.params来访问路径参数。在hash地址中，?

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

router-link的其他属性补充

vfjcgg的博客

06-29

186

router-link的其他属性补充在前面< router-link >中，我们只是使用了一个属性：to，用于指定跳转的路径 < router-link >还有一些其他属性： tag: tag可以指定< router-link >之后渲染成什么组件 <template> <div id="app"> <h2>我是App组件</h2> <router-link to="/Home" tag="but

router-link 属性

Elainerui的博客

10-20

383

router-link 属性补充 1.to 进行页面跳转，更改路径 2.tag : 指定<router-link>之后渲染成什么组件，比如将其渲染成<li> 3.replace : replace不会留下history记录，所以指定replace的情况下，后退键返回不能返回到上一个页面 4.active-class : <router-link>对应的路由匹配成功时，会自动给当前元素设置一个router-link-active的class，设置active-class可以

VueRouter: this.$route.push跳转,携带参数

天涯芳草

04-26

4万+

this.$router.push传递参数有2种方式：传递参数-- this.$router.push({path: ' 路由 ', query: {key: value}}) 参数取值-- this.$route.query.key 使用这种方式，传递参数会拼接在路由后面，出现在地址栏. 传递参数-- this.$router.push({name: ' 路由的name ', params: {key: value}}) 参数取值-- this.$route.params...

基础路由里面增加开发者自定义属性 router.ts的RouteRecordRaw类型校验

qq_45225600的博客

01-23

7173

基础路由里面增加开发者自定义属性 router.ts的RouteRecordRaw类型校验为了规范化typescript开发，增加路由对象类型限制，好处：允许在基础路由里面增加开发者自定义属性。 { path: '/project', hidden: false, name: 'project', component: () => import("../pages/project/index.vue"), }, 值得注意的是在src目录下新增一个路由声明文

vue router-link 默认a标签去除下划线的实现

01-18

我就废话不多说了，大家还是直接看例子吧~ .router-link-active{ text-decoration: none; } vue的router-link默认的a标签点击会有一个阴影补充知识：vue-router更改router-link点击时样式默认类：router-link-active：可以通过在样式表中重新定义基类：linkActiveClass：在创建路由时进行全局配置，linkActiveClass：/配置自定义类/ 以上这篇vue router-link 默认a标签去除下划线的实现就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网

解决Vue router-link绑定事件不生效的问题

10-15

以下内容将详细介绍这一问题及其解决方案，同时还会补充一些关于router-link使用过程中可能出现的其他问题和注意事项。首先，需要了解router-link组件的主要作用是创建a标签，其to属性用于指定跳转的路由地址，...

Vue如何定义router-link的颜色样式

weixin_54048131的博客

08-05

2014

里面xxx的内容颜色都固定了，style样式改成：样式改不了。这样就可以修改样式了。

router-link扩大点击范围

最新发布

09-01

首先，你可以创建一个自定义的`RouterLink`组件，并将其用作`router-link`的替代品。在自定义组件中，你可以使用一个包裹`router-link`的容器元素，例如一个`div`，并为该容器元素添加一个适当的点击事件监听器。...

第 09 节、路由：Router 中的属性和路由模式

DreamFive

03-22

1710

目录目录 basename属性 forceRefresh属性 5中路由方式现在我们已经掌握了React路由导航的基本方法，这节学习一下标签上的属性和用法。这节还有一个重点就是路由的5种模式。 basename属性 basename的作用是我们增加一级导航目录，比如以前的导航目录是：http://localhost:1717/Jscomponentb 现在想访问同一...

Vue Router active-class 属性

lio-zero 的博客

05-22

2399

active-class 是 vue-router 模块的 router-link 组件的属性，当 router-link 标签被点击时将会应用这个样式。有两种使用方式：直接在路由 Router 构造函数中配置 linkActiveClass 属性 export default new Router({ linkActiveClass: 'active', }) 使用这种方式，会在每个...

RouterLink匹配类名

m0_45219210的博客

04-22

505

根据to后面的路径匹配对应的类名。规则如下 router-link-active 当你的路由路径包含 router-link组件的to属性值，当前组件会加上它 router-link-exact-active 当你的路由路径完全和你的router-link组件的to属性值一致，当前组件会加上它像下面这行代码，就是当url后面的路径为/member时吗，就会给当前的RouterLink添加上名active的类名。 <RouterLink exact-active-class="act

vue 使用命名视图实现经典布局-------components里面传对象-----router-view里面增加name属性

qq_42039912的博客

07-18

774

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title&g.

vue2.0中router-link详解

热门推荐

冰雪为融的博客

07-17

18万+

在vue2.0中，原来的v-link指令已经被<router-link>组件替代了 <router-link>组件支持用户在具有路由功能的应用中点击导航。通过to属性指定目标地址，默认渲染为带有正确连接的<a>标签，可以通过配置tag属性生成别的标签。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的css类名 <router-link>...

如何通过路由链接设置class类？

qq_46580571的博客

08-08

572

如何通过路由链接设置class类？

react router给Route组件设置自定义属性

Sophie_U的博客

06-11

5890

场景分析当使用Route在页面内做跳转时，有时想要传一些自定义属性到子路由组件中，而常用的<Route path={xxx} component={Component} test={123}/>这种方式设置test属性是无效的，因此需要用到Route的第二种渲染方式解决办法 Route组件的render方法 <Route path="/home" re...

vue-router的基本框架及写法，router-view与router-link

weixin_42738354的博客

10-25

3395

一.安装和使用vue-router 步骤一：安装vue-router:npm install vue-router --save 步骤二：在模块化工程中使用它如果使用Vuecli脚手架，在配置时选择安装，则我们可以在src文件夹中找到router文件夹，并且其中会包含index.js文件，在这个js文件中，我们将配置所有的路由相关的信息 1.搭建路由框架第一步：导入路由对象，并且调用Vue.use(VueRouter) 第二步：创建路由实例，并且传入路由映射配置第三步：在Vue实例中挂载创建的路由实

vue-router-link选择样式设置

wenfu814的博客

08-27

9831

第一种：在router-link组件上添加属性 active-class=‘ative’ 在css中设置 .actve样式即可第二种在css中写样式 router-link-exact-active <template> <div id="app"> <div class="nav"> <router-link to='/home'>首页</router-link> <router-link to='/abou