vue路由的active-class和exact-active-class区别

exact-active-class 和 active-class 的区别

router-link 默认情况下的路由是模糊匹配,例如当前路径是 /article/1 那么也会激活 <router-link to="/article">,所以当设置 exact-active-class 以后,这个 router-link 只有在当前路由被全包含匹配时才会被激活 exact-active-class 中的 class,例如:

<router-link to="/article" active-class="router-active"></router-link>

当用户访问 /article/1 时会被激活为:

<a href="#/article" class="router-active" rel="nofollow"></a>

而当使用:

<router-link to="/article" exact-active-class="router-active"></router-link>

当用户访问 /article/1 时,不会激活这个 link 的 class:

<a href="#/article" rel="nofollow"></a>

原文地址:https://www.cnblogs.com/kevoin/p/9914334.html

时间: 2024-11-06 09:25:42

vue路由的active-class和exact-active-class区别的相关文章

14.vue路由&amp;脚手架

一.vue路由:https://router.vuejs.org/zh/ 1.定义 let router = new VueRouter({ mode:"history/hash", base:"基本路径" 加一些前缀 必须在history模式下有效 linkActiveClass:"active", 范围选择 linkExactActiveClass:"exact", 精确选择 routes:[ {path,componen

初印象至Vue路由

初印象系列为快速了解一门技术的内容,后续会推出本人应用这门技术时发现的一些认识. Vue路由和传统路由的区别: Vue路由主要是用来实现单页面应用内各个组件之间的切换,同样支持传递参数等功能.而传统路由使用超链接 以下内容来自官网,js使用ES6 如何在vue项目中使用vue-router HTML <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="htt

Vue - 路由传递参数

Vue 2.0  路由传递参数 Vue 路由传递参数 有两种方式: 一.用name传递参数 两步完成用name传值并显示在模板里: 在路由文件src/router/index.js里配置name属性. 1 2 3 4 5 6 7 routes: [ { path: '/', name: 'Hello', component: Hello } ] 模板里(src/App.vue)用$router.name的形势接收,比如直接在模板中显示: 1 <p>{{ $route.name}}</p&

Vue路由跳转问题记录

最近项目上需要用Vue用来做app,在Vue中使用路由时遇到下面的问题. 路由设置如下: { path:'/tab', component:Tab, children:[{ path:'layoutList', name:'LayoutList', component:LayoutList },{ path:'layoutView/:layoutId', name:'LayoutView', component:LayoutView },{ path:'layoutDetail/:viewId'

Vue.js—组件快速入门以及Vue路由实例应用

上次我们学习了Vue.js的基础,并且通过综合的小实例进一步的熟悉了Vue.js的基础应用.今天我们就继续讲讲Vue.js的组件,更加深入的了解Vue,js的使用.首先我们先了解一下什么是Vue.js的组件,组件其实就是页面组成的一部分,它是一个具有独立的逻辑和功能或页面,组件可以扩展 HTML 元素,封装可重用的代码.组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树,如下图: 接下来我们就仔细讲讲组件的使用吧. 1 全局组件 以下就是我们注册

vue 路由懒加载

题外: 我司目前的后台管理网站依旧是 jq + xxUI 构成的 ,早就想把 丫儿 个换成 vue了, 苦于整个组几乎一致处于一个忙碌的状态,没有时间来重构. 然鹅,昨天今天组长找到我说要用 vue 搞起来,这个问题不大,毕竟之前用他完成了几个项目,颇有收获,教训满满. 看着 左侧 冗长菜单 item ,不禁陷入了沉思. 当打包构建应用时,Javascript 包会变得非常大,首次加载即便使用了 各种 LOADING ,各种 动画,肯定体验贼差, 如果我们能把不同路由对应的组件分割成不同的代码块

vue 路由传参的三种基本模式

路由是连接各个页面的桥梁,而参数在其中扮演者异常重要的角色,在一定意义上,决定着两座桥梁是否能够连接成功. 在vue路由中,支持3中传参方式. 场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取对应li的数据,显示相应的正确的内容. 父组件中: <li v-for="article in articles" @click="getDescribe(article.id)"> 方案一: getDescribe(id) { // 直接调用$

Vue路由学习心得

GoodBoy and GoodGirl~进来了就看完点个赞再离开,写了这么多也不容易的~ 一.介绍  1.概念:路由其实就是指向的意思,当我们点击home按钮时,页面中就要显示home的内容,点击login按钮时,页面就显示login的内容,也可以说是一种映射,所有在页面上有两个部分,一个是点击部分,一个是显示部分. 2.路由中有三个基本的概念,route,routes,router. 1.route:它是一个路由,是一个单数,点击Home按钮->Home内容 2.routes:它是一组路由,

Vue 路由的懒加载和组件的按需加载方法

// aview: function(resolve) { // require(["./a.vue"], resolve); // }, // bview: function(resolve) { // require(["./b.vue"], resolve); // } aview:require("./a.vue"), bview:require("./b.vue"), "懒加载也叫延迟加载,即在需要的时候进

vue路由获取路由参数

vue路由设置路由参数有2种方式: 1.通过query配置: <router-link :to="{ name:'login',query:{id:1} }">登录</router-link> 通过query配置的路径显示如下: 2.通过params配置: <router-link :to="{ name:'register',params:{'name':'San'} }">注册</router-link> 通过qu