vue-router为激活的路由设置样式操作

1.首先先写好类名

2.在router里的js文件中添加 linkActiveClass:'active'

补充知识：记录vue遇到问题，子页面没有router-link对应导航栏激活样式

如下所示：

li><router-link to="/basicSearch" :class="{'link-active':linkBoolean}">基础检索</router-link></li>

 data () {
 return {
  imgUrl,
  linkBoolean:false
 }
 },
 created(){

 if(this.$route.path == "/storeDetails" || this.$route.path == "/utxoDetails" ||
 this.$route.path == "/blockAllDetails"){
  this.linkBoolean = true
 }
 },

根据Router中子页面链接名称，指定对应上级页面的导航样式是否激活

以上这篇vue-router为激活的路由设置样式操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue获取当前激活路由的方法

    一个 route object(路由信息对象) 表示当前激活的路由的状态信息,包含了当前 URL 解析得到的信息,还有 URL 匹配到的 route records(路由记录). route object 是 immutable(不可变) 的,每次成功的导航后都会产生一个新的对象. route object 出现在多个地方: 在组件内,即 this.$route 在 $route 观察者回调内 router.match(location) 的返回值 (在main.js可以获取当前激活路由信息)

  • vue 导航内容设置选中状态样式的例子

    如图所示,我们一般需要切换的时候选中导航给个active样式, 而router-link 标签 在选中的时候  会自动给整个标签添加一个 router-link-active的class 可给router-link 标签里面的span.i标签如下设置,非常简单,下面是stylus的写法,不需要的话也可以写成平时的css写法 .router-link-active span i color: red 以上这篇vue 导航内容设置选中状态样式的例子就是小编分享给大家的全部内容了,希望能给大家一个参考

  • vue router 配置路由的方法

    用 Vue.js + vue-router 创建单页应用,是非常简单的.使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 vue-router 添加进来,我们需要做的是,将组件(components)映射到路由(routes),然后告诉 vue-router 在哪里渲染它们. 路由的基本实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&

  • vue-router路由模式详解(小结)

    一.路由模式解析 要讲vue-router的路由模式,首先要了解的一点就是路由是由多个URL组成的,使用不同的URL可以相应的导航到不同的位置. 如果有进行过服务器开发或者对http协议有所了解就会知道,浏览器中对页面的访问是无状态的,所以我们在切换不同的页面时都会重新进行请求.而实际使用vue和vue-router开发就会明白,在切换页面时是没有重新进行请求的,使用起来就好像页面是有状态的,这是什么原因呢. 这其实是借助了浏览器的History API来实现的,这样可以使得页面跳转而不刷新,页

  • vue-router为激活的路由设置样式操作

    1.首先先写好类名 2.在router里的js文件中添加 linkActiveClass:'active' 补充知识:记录vue遇到问题,子页面没有router-link对应导航栏激活样式 如下所示: li><router-link to="/basicSearch" :class="{'link-active':linkBoolean}">基础检索</router-link></li> data () { return {

  • 全面解析vue router 基本使用(动态路由，嵌套路由)

    路由,其实就是指向的意思,当我点击页面上的home按钮时,页面中就要显示home的内容,如果点击页面上的about 按钮,页面中就要显示about 的内容.Home按钮  => home 内容, about按钮 => about 内容,也可以说是一种映射. 所以在页面上有两个部分,一个是点击部分,一个是点击之后,显示内容的部分. 点击之后,怎么做到正确的对应,比如,我点击home 按钮,页面中怎么就正好能显示home的内容.这就要在js 文件中配置路由. 路由中有三个基本的概念 route,

  • vue router学习之动态路由和嵌套路由详解

    vue router学习之动态路由和嵌套路由详解

    本文主要参考:https://router.vuejs.org/zh-cn/essentials/nested-routes.html 本文的阅读前提是已经能够搭建一个vue前台程序并且运行.如果还么有搭建可以参考文章: http://www.jb51.net/article/111650.htm 好,下面上货. 首先介绍一下动态路由. 动态路由按照我的理解,就是说能够进行页面的跳转,比如说:下面的这个页面中: <template> <div id="app">

  • Vue Router中应用中间件的方法

    中间件是我们在软件开发中的一个古老而强大的概念,当我们在应用程序中使用路由相关模式时,它非常有用. 如果您不太了解中间件的含义,Nodejs框架Express里的中间件可以帮助您了解它们的工作原理. 但是,中间件仅适用于后端吗? 不,当应用程序中有路由时,中间件在前端或后端中就会非常常见.比如现在流行的单页应用程序. 有一些示例可以说明,何时可以使用中间件: 不允许未登录用户访问您的网页. 仅允许某些类型的用户查看页面(角色:管理员,作者等) 数据采集. 重置设置或清理存储空间. 限制访问用户的

  • vue router动态路由设置参数可选问题

    在日常工作中,我们需要将匹配到的所有路由,映射到一个组件上. 如下代码想要达到的效果: 不传page和id,则映射到user默认list页面 传page和id,根据page不同,显示不同的页面 问题 使用以下代码片段是不能实现以上效果的,因为默认情况下page和id参数是必传的,如果不传参数,则会根据默认路由跳转到home页面 new Router({ routes: [ { path: '/user/:page/:id', name: 'User', component: () => impo

  • 浅谈Vue.js路由管理器 Vue Router

    起步 HTML <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <div id="app"> <h1>Hello App!</h1> <p>

  • vue项目创建步骤及路由router

    vue项目创建步骤及路由router

    1.创建一个vue项目步骤 (windows环境下).创建vue项目前,检查系统是否具备创建项目的条件(是否已经安装好了node.js.webpack.vue-cli).cmd打开终端. 1.1 如果还没安装node.js, 则先安装node.js,安装完成后,查看node版本 node -v 1.2 安装淘宝镜像, 安装完成后查看npm版本:npm -v npm install -g cnpm --registry=https://registry.npm.taobao.org 1.3 安装w

  • vue router下的html5 history在iis服务器上的设置方法

    vue router下的html5 history在iis服务器上的设置方法

    首先先照搬下官网的介绍 当你使用 history 模式时,URL 就像正常的 url,例如 http://yoursite.com/user/id,也好看! 不过这种模式要玩好,还需要后台配置支持.因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404,这就不好看了. 所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个index.html 页面,

  • vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法

    vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法

    解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题,具体内容如下 一. 异常描述 本来使用的是vue-router的hash模式,但是hash模式下url需要带"#"符号,不仅看起来不舒服,而且有些场景下是会破坏路由中的"#"(微信分享页面就会把"#"后边的内容处理掉),所以就需要使用history模式,然后就让后端改下nginx配置: location / { try_files $uri $uri/ /in

随机推荐