Vue中router-link常用属性使用案例讲解

目录
  • Vue中router-link常用属性使用
    • router-link属性
  • vue中的router-link属性详解
    • router-link标签
    • router-link属性值详解

Vue中router-link常用属性使用

在vue1.0版本的超链接标签还是原来的a标签，链接地址由v-link属性控制
而vue2.0版本里超链接标签由a标签被替换成了router-link标签，但最终在页面还是会被渲染成a标签的
至于为什么要把a换成router-link原因还是有的，比如我们之前一直惯用的nav导航里面结构是（ul>li>a），router-link可以渲染为任何元素，这里可以直接渲染成li标签，同样能实现跳转效果，节省了a标签的使用，还有一个原因可能是因为a标签正常是链接的跳转的作用，点击a时可能会重载页面，使用router-link，此标签会被vue所监听，跳转链接时就不会刷新页面了。

router-link属性

:to 属性

相当于a标签中的”herf”属性，后面跟跳转链接所用
<router-link :to="/home">Home</router-link>
<!-- 渲染结果 -->
<a href="/home" rel="external nofollow" >Home</a>
replace属性

replace在routre-link标签中添加后，页面切换时不会留下历史记录
<router-link :to="/home" replace></router-link>

tag属性

具有tag属性的router-link会被渲染成相应的标签
<router-link :to="/home" tag="li">Home</router-link>
<!-- 渲染结果 -->
<li>Home</li>

此时页面的li同样会起到a链接跳转的结果，vue会自动为其绑定点击事件，并跳转页面
active-class属性

这个属性是设置激活链接时class属性，也就是当前页面所有与当前地址所匹配的的链接都会被添加class属性
<router-link :to="/home" active-class="u-link--Active">Home</router-link>
active-class属性的默认值是router-link-active,所以如果没有设置，就会被渲染为这个class
可以在router.Js里面设置
const router = new VueRouter({
mode: 'hash',
linkActiveClass: 'u-link--Active', // 这是链接激活时的class
})
exact属性

开启router-link的严格模式
<router-link :to="/" exact>home</router-link>
上面这个标签如果不加exact属性，则会在vue2.leenty.com/article页面下也会被匹配到，
这却不是我们的本意,在加了这个属性后就会正确的匹配到vue2.leenty.com下

以上内容就给大家介绍到这里，下面介绍下vue中的router-link属性详解

vue中的router-link属性详解

vue中的router-link属性有以下属性值：to相当于herf标签用于添加跳转内容，replace用于页面切换时不会留下历史记录以及tag将router-link渲染成相应的标签等等

在vue中，vue.js与 vue-router 两者结合在一起可以实现简单的单页面应用，其中<router-link>是一个组件，主要用于设置导航的链接来实现不同的HTML内容切换。接下来在文章中将为大家具体介绍这一属性，具有一定的参考价值，希望对大家有所帮助。

router-link标签

在vue1.0版本中的仍然用a标签来实现链接跳转功能，但链接地址与html中不同，它是采用v-link属性来控制。但是在2.0版本中a标签就被替换成了rount-link属性，但是最终在页面上显示还是会被渲染成a标签。接下来将要详细的介绍该属性中的各个值的用法

router-link属性值详解

（1）":to" 属性值

这个属性值就相当于a标签中的"herf"属性，后面的内容为跳转链接的内容

<router-link :to="//www.jb51.net/">我们</router-link>

相当于

<a href="//www.jb51.net/">我们</a>

（2）"replace" 属性值

replace属性值在routre-link标签中添加的主要目的在于页面切换时不会留下历史记录

<router-link :to="//www.jb51.net/" replace></router-link>

（3）"tag" 属性值

具有tag属性的router-link都会被渲染成相应的标签

<router-link :to="///www.jb51.net" tag="li">我们</router-link>

相当于

<li>我们</li>

此时的页面中的li同样会起到a标签的作用，因为vue会自动为其绑定点击事件，并跳转页面

（4）"active-class"属性值

这个属性是用于设置激活链接时class属性，也就是当前页面及所有与当前页面地址所匹配的的链接都会被添加class属性

<router-link :to="//www.jb51.net" active-class="u-link--Active">我们</router-link>

active-class属性的默认值是router-link-active,所以如果没有设置，就会被渲染为这个class

（5）“append”属性值

设置 append 属性后，则在当前 (相对) 路径前添加基路径。例如，我们从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b

<router-link :to="{ path: 'relative/path'}" append></router-link>

使用router-link代替a标签的好处

router-link属性在页面中可以渲染为任何元素，比如上述代码中渲染成li标签依然实现了跳转效果。另外当我们点击a标签时可能会重载页面，但是使用router-link后此标签会被vue所监听，跳转链接时就不会刷新页面了。

到此这篇关于Vue中router-link常用属性-使用案例的文章就介绍到这了,更多相关Vue中router-link属性内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue router 路由跳转方法讲解

    目录 一.概述 二.跳转方法 1.使用router-link标签 2.使用router-replace 3.使用router-push 三.路由中params和query的区别 一.概述 使用到Vue的项目,我们最常见使用的就是Vue配套的Vue Router库. 那么在平日开发中,有多少种跳转路由的方法? 二.跳转方法 1.使用router-link标签 使用router-link标签,我们通常会使用到2个参数,最常用的就是to参数to参数,表示你想要跳转到的路由对象 router-link标

  • Vue router配置与使用分析讲解

    目录 说明 一.安装及配置 二.在html中使用 HTML router-link router-view 三.路由的基本使用 四.动态路由的添加 说明 本教程适用于vue3中的路由vue-router@4,的配置及使用 安装及配置 路由的基本使用 动态路由的添加 路由守卫 找不到路由配置(path: ‘/:pathMatch(.)’,) 一.安装及配置 安装 npm install vue-router@4 配置 //自己创建的router文件中 import { createRouter,

  • 快速掌握Vue Router使用方法

    目录 一.编程式路由导航 二.缓存路由组件 三.两个新的声明周期钩子 四.路由守卫 五.路由器的两种工作模式 本篇博客会介绍Vue中的VueRouter的基本使用,编程式路由导航增加了我们进行路由跳转的灵活性,缓存路由组件保障了我们使用路由时的便捷性,生命周期钩子为我们切入切出路由时提供了初始化与善后的工作,路由守卫保障了我们路由组件的安全性,路由工作模式会使我们理解为啥Vue项目中的路由会有一个#,通过本篇博客会让大家快速掌握Vue中路由的基本使用. 一.编程式路由导航 作用:不借助<rout

  • Vue3的vue-router超详细使用示例教程

    目录 搭建vue3环境 vue-router入门(宝宝模式) vue-router基础(青年模式) 一.动态路由匹配 1.带参数的动态路由匹配 2.捕获所有路由或404 Not Found路由 二.嵌套路由 三.编程式导航 1.router.push()方法的使用 2.router.replace()方法的使用 3.router.go()方法的使用 搭建vue3环境 我们使用vite来搭建vue3环境(没有安装vite需要去安装vite) npm create vite routerStudy

  • vue-router传参的四种方式超详细讲解

    目录 vue路由传参的四种方式 一.router-link路由导航方式传参 二.调用$router.push实现路由传参 三.通过路由属性name匹配路由,再根据params传递参数 四.通过query来传递参数 vue-router传递参数的几种方式 vue路由传参的四种方式 一.router-link路由导航方式传参 父组件:<router-link to="/跳转到的路径/传入的参数"></router-link>子组件:this.$route.param

  • vue-router的导航守卫使用最新讲解

    目录 前言 vue-router中编程式导航API 导航守卫 全局守卫 独享路由守卫 组件路由守卫 前言 在浏览器中点击链接实现导航的方式,叫做声明式导航.例如:普通网页中点击<a>链接.vue项目中点击<router-link>都属于声明式导航. 在浏览器中调用API方法实现的导航方式,叫做编程式导航.例如:普通网页中调用loaction.href跳转到新页面的方式,属于编程式导航. vue-router中编程式导航API 编程式路由导航作用就是不借助<router-lin

  • Vue中router-link常用属性使用案例讲解

    目录 Vue中router-link常用属性使用 router-link属性 vue中的router-link属性详解 router-link标签 router-link属性值详解 Vue中router-link常用属性使用 在vue1.0版本的超链接标签还是原来的a标签,链接地址由v-link属性控制而vue2.0版本里超链接标签由a标签被替换成了router-link标签,但最终在页面还是会被渲染成a标签的至于为什么要把a换成router-link原因还是有的,比如我们之前一直惯用的nav导

  • vue 中this.$set 动态绑定数据的案例讲解

    感觉网上对this.$set的讲解乱糟糟的,我来总结一下对它单个数据.对象.数组.json数据的绑定. 话不多说直接上代码: <template> <div> <!-- 单个数据 --> <button @click="text0a">text0</button> <p>text0: {{text0}}</p> <!-- 对象 --> <button @click="text

  • VUE中setTimeout和setInterval自动销毁案例

    在Vue的大型单页应用中,在某个路由下,经常会出现需要延迟执行(setTimeout)或者间隔之心(setInterval)的函数,但是每次在页面destroy之前,都必须手动清理掉. 正常代码如下: beforeDestroy() { this._timer && clearTimeout(this._timer); } 但是如果一不小心,就会忘记,会造成意想不到的情况,那么有什么办法能避免这种情况吗? 当然有,那就是重新写一个setTimeout的方法(或者干脆劫持window.set

  • vue中的循环对象属性和属性值用法

    v-for除了可以循环数组,还可以循环对象. 例子: <template> <div> <div v-for="(item,i) in obj">{{i}}--{{item}}</div> </div> </template> <script> export default { name: "HelloWorld", data () { return { obj:{ age:1, n

  • 详解vue中$router和$route的区别

    详解vue中$router和$route的区别

    我们在 vue 项目中一般都会用到路由,而 vue-router 是 vue.js 官方的路由管理器. this.$route:当前激活的路由的信息对象.每个对象都是局部的,可以获取当前路由的 path, name, params, query 等属性. this.$router:全局的 router 实例.通过 vue 根实例中注入 router 实例,然后再注入到每个子组件,从而让整个应用都有路由功能.其中包含了很多属性和对象(比如 history 对象),任何页面也都可以调用其 push(

  • Vue中$router与 $route的区别详解

    Vue中$router与 $route的区别详解

    目录 前言 路由跳转分为编程式和声明式 前言 点击视频讲解更加详细 this.$route:当前激活的路由的信息对象.每个对象都是局部的,可以获取当前路由的 path, name, params, query 等属性. this.$router:全局的 router 实例.通过 vue 根实例中注入 router 实例,然后再注入到每个子组件,从而让整个应用都有路由功能.其中包含了很多属性和对象(比如 history 对象),任何页面也都可以调用其 push(), replace(), go()

  • Vue中watch清除过期副作用的案例详解

    在这里就不过多说watch的用法了,主要了解一下如何清除过期的副作用 通过一个案例来说吧: 一个可搜索的下拉选择器,用户第一次进行搜索的时候网速比较慢,请求虽然被服务端正确响应了,但是数据一直没有传输到客户端,用户看下拉数据没变化 就第二次搜索.第二次搜索之后网速恢复正常了,第二次请求的数据很快就客户端接收且正确渲染:紧接着第一次的数据也被客户端接收且客户端正确渲染. 这样就可能存在这样一种情况,第一次请求,服务端响应了请求但数据还没被客户端接收的时候,有人修改了数据:然后用户又点击刷新,响应数

  • 对VUE中的对象添加属性

    背景:在通过接口获取数据集对象后,根据业务场景需要在数据集对象上增加额外的属性 data中定义的数据集对象mindData格式示例如下 mindData: [ {label:'清醒',value:'清醒'}, {label:'朦胧',value:'朦胧'}, {label:'嗜睡',value:'嗜睡'}, {label:'昏睡',value:'昏睡'}, {label:'谵妄',value:'谵妄'}, {label:'模糊',value:'模糊'}] 1) 通过post调用接口获取minDa

  • 在vue中使用Base64转码的案例

    在vue项目中有时会使用到Base6464转码,现将自己使用的一种方法记录,以供参考 1:安装依赖 npm install --save js-base64 2:在main.js中引入 const Base64 = require('js-base64').Base64 new Vue({ el: '#app', Base64 }) 3:在需要转码的文件中使用 const Base64 = require('js-base64').Base64 const exStr = Base64.enco

  • vue中echarts引入中国地图的案例

    如下所示: <div id="myChartChina" :style="{width: '100%', height: '500px'}"></div> mounted() { this.drawLine(); }, drawLine(){ // 基于准备好的dom,初始化echarts实例 var myChartContainer = document.getElementById('myChartChina'); var resizeM

随机推荐