设置vue默认路由的样式

最新推荐文章于 2023-07-06 11:06:37 发布
最新推荐文章于 2023-07-06 11:06:37 发布
阅读量4.2k 收藏
点赞数 1
分类专栏： vue 文章标签： vur-router redirect
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010510187/article/details/100628466
版权
在Vue中，通过router-link-active可以设置路由激活时的样式。然而，当遇到默认路由未显示选中样式时，可通过在路由配置中使用redirect进行重定向来解决。这样，实际显示的第一个视图会作为激活路由，从而正确应用选中样式。
摘要由CSDN通过智能技术生成

可以使用router-link-active设置路由选中时的样式，但是当我们在设置默认路由时，会出现第一个显示第一个路由对应的视图，但是第一个路由没有呈现选中的样式。
此时只要在配置默认路由时使用一下redirect路由重定向即可解决问题。

<template>
  <div class="footer">
    <router-link to="/home">
      <i class="iconfont icon-home"></i>首页
    </router-link>
    <router-link to="/list">
      <i class="iconfont icon-chazhaobiaodanliebiao">
最低0.47元/天 解锁文章
fengyezi159
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
10-18
主要介绍了vue-cli 默认路由再子路由选中下的选中状态问题及解决代码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
Vue的三种路由模式
yiwai6998的博客
11-05 1万+
路由模式解析 这里要讲vue-router的路由模式，首先要了解的一点就是路由是由多个URL组成的，使用不同的URL可以相应的导航到不同的位置。如果有进行过服务器开发或者对http协议有所了解就会知道，浏览器中对页面的访问是无状态的，所以我们在切换不同的页面时都会重新进行请求。而实际使用vue和vue-router开发就会明白，在切换页面时是没有重新进行请求也没有重新刷新页面，使用起来就好像页面是有状态的，这是什么原因呢。这其实是借助了浏览器的History API来实现的，这样可以使得页面跳转而不刷新，页
vue2.0设置默认路由的代码，以及点击不同路由加上样式的api
qq_38387487的博客
08-08 687
import Vue from 'vue' import App from './App' import VueRouter from 'vue-router' import goods from './components/goods/goods.vue' import basing from './components/basing/basing.vue' import seller
关于vue清除默认样式&scoped
hlonelier的博客
07-06 3627
父组件有`scoped`属性，子组件无，父组件也无法设置子组件样式，因为父组件的所有标签都会带有data-v-469af010唯一标志，但子组件不会带有这个唯一标志属性，与1同理，虽然我们可以在全局中通过该类标签的标签选择器设置样式，但会影响到其他组件。总之，`scoped` 样式是 Vue 提供的一种实现组件样式局部化的机制，它可以确保组件样式的隔离和可维护性，使样式的影响范围局限在组件内部，不会对其他组件或全局样式产生冲突。这意味着选择器的特殊性可能会改变，你可能需要使用更具体的选择器来覆盖全局样式。
如何修改 antd vue 单个组件的默认样式
weixin_42289080的博客
03-01 7949
Ant Design Vue地址：https://www.antdv.com/docs/vue/introduce-cn/ 刚接触Ant Design Vue的童鞋们可能会有这样的问题，不就是修改默认的组件样式吗，为什么一会生效，一会又不生效。希望看完这个文章，会给你一些收获~ 一、想要修改组件的默认样式，首先你需要知道组件是渲染在哪里的 这个组件是渲染在当前页面内部，还是脱离vue根节点单独渲染？（根节点默认id=“app”） 这个问题的答案很容易得到，打开文章顶部的antdv官方文档，任意选中组件，F1
vue系列 —— vue-route详细使用方法
热门推荐
七月
11-30 3万+
说到路由， 我们最熟悉的路由是什么呢？ 那就是路由器了。 其实路由器有两个重要的功能： 路由和传送 路由： 路由决定数据包从哪里来， 到哪里去。 也有是来源和目的地的路径。 路由中有一个路由表，路由表本质上就是一个映射表，决定了数据包的传输方向。 传送： 传送是将输入端的数据传送给输出端 下面我们先来搭建一个项目, 然后一边学习一遍在项目里实战 创建vue-cli2项目 vue init webpacek vueroute 然后一路向下就可以了, 如果本地创建项目很慢, 可以采用离线创建项目的
vue路由切换时取消之前的所有请求操作
10-14
在Vue.js应用中，路由切换是常见的操作，但有时我们希望在用户切换路由时取消之前正在进行的网络请求，以避免不必要数据的加载或者错误的数据处理。本文将详细讲解如何在Vue路由切换时取消之前的所有请求操作。 ...
vue子路由跳转实现tab选项卡
10-16
path: '/', // 默认路由 name: 'Tab', component: Tab, children: [ // 子路由配置 { path: '/page-one', name: 'PageOne', component: PageOne }, { path: '/page-two', name: 'PageTwo', component: ...
vue router 配置路由的方法
10-18
这通常用于设定默认路由。 ### 路由导航高亮 为了在导航中突出显示当前选中的链接，Vue Router 提供了 `router-link-exact-active` 和 `router-link-active` 类。这两个类会在相应的 `router-link` 匹配当前激活的...
深入理解vue2.0路由如何配置问题
08-29
重定向路由可以设置在数组开头，用于页面加载时默认跳转到指定页面，例如跳转到`/main`： ```javascript { path: '/', redirect: '/main' } ``` 对于具有子路由的路由，我们可以配置`children`属性。例如，`...
vue 路由高亮模式(即给页面路由名称添加样式)
weixin_43294560的博客
02-16 1112
路由高亮模式 将当前所在路由名称包括父路由的名称变成红色 第一种: 在主入口文件App.vue的style中设置 .router-link-active{ color:red; } 第二种: 1、在总路由js文件中,和routes同级 linkActiveClass:'xx', 2、在主入口文件App.vue的style中设置 .xx{...
css样式重置
bacaojuan5114的博客
05-24 300
/* 清除内外边距 */ body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */ dl, dt, dd, ul, ol, li, /* list elements 列表元素 */ pre, /* text formatting elements 文本格式元素 */ fiel...
vue项目修改组件库默认样式
iceylia的博客
09-04 4119
修改默认样式，可以从外部引入css，写在main.js中，达到全局引入也可以在任意一个没写scoped的style中使用如果想要只改变当前组件的默认样式，就需要使用深度作用选择器在使用element-ui等组件库的时候，需要修改默认样式在组件内这样修改是不行的不是权重的问题。可以使用!important提高优先级有些样式还是修改不了。后来发现。
vue实现修改title提示框-默认样式【两种方式】
在写作的路上持续输出。
12-23 5920
vue实现修改title提示框-默认样式【两种方式】
CSS reset样式重置
demonHunter1234的博客
12-01 333
我们总能看见这样的重置样式： 1 *{ 2 padding:0; 3 margin: 0; 4 } 强烈不推荐！！！ 推荐重置样式示例：部分内容可进行相应调整！ 1 /* reset */ 2 html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figu...
Vue 设置选中路由的样式
weixin_43912756的博客
03-22 996
<style> .router-link-active { font-size: 30px; font-weight: 600; color: pink; } </style> 同时，也可自己设置链接激活时的CSS类名 >>> 通...
当vue路由变化时，改变导航栏的样式
ShiYadong的专栏
02-03 8309
 当我们需要做一个类似顶部 或 底部导航栏公共组件的时候，单击某个导航栏按钮，跳转到另一个组件， 并且改变导航栏按钮的样式，如果用&lt;router-link to=""&gt;&lt;router-link/&gt; 跳转的时候，我们可以这样做， 改变router-link-active 的样式，它是路由path指向当前组件时系统自动生成的。  先看下效果：   贴上我的路由文件...
vue-router为激活的路由设置样式
tjm13723608897的博客
07-02 4725
1.首先先写好类名2.在router里的js文件中添加 linkActiveClass:'active'
对于Vue-cli的路由跳转以及使用vue.js动态修改CSS样式
撕裂彡天堂丶的博客
12-06 1万+
对于Vue-cli的路由跳转以及使用vue.js动态修改CSS样式本人系前端小白，如有不对的地方轻喷，只是写自己总结下来的一些简单应用。 1.路由跳转的两种基本方式 2.动态修改class名 如果有不对的地方还请各位大牛指出。
vue2路由 router-link
最新发布
09-21
它是基于Vue Router实现的，可以通过设置不同的属性来配置链接的行为和样式。 router-link的tag属性用于指定渲染为哪种HTML标签，默认为a标签。通过设置tag属性，你可以将链接渲染为其他标签，比如button或div等。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值