vue.js默认路由不加载linkActiveClass问题的解决方法
作者:蓝调爵士 发布时间:2024-05-02 16:53:25
标签:vue.js,默认路由,linkactiveclass
发现问题
最近在打开项目的时候,发现我的默认路由没加载上linkActiveClass,
网上一搜,发现很多同学也有这个问题,查了一些资料发现这是个重定向的问题,官网文档是这么写的
https://router.vuejs.org/zh-cn/essentials/redirect-and-alias.html
重定向
重定向也是通过 routes 配置来完成,下面例子是从 /a 重定向到 /b:
const router = new VueRouter({
routes: [
{ path: '/a', redirect: '/b' }
]
})
重定向的目标也可以是一个命名的路由:
const router = new VueRouter({
routes: [
{ path: '/a', redirect: { name: 'foo' }}
]
})
甚至是一个方法,动态返回重定向目标:
const router = new VueRouter({
routes: [
{ path: '/a', redirect: to => {
// 方法接收 目标路由 作为参数
// return 重定向的 字符串路径/路径对象
}}
]
})
我的代码本来是这样的:
const router=new VueRouter({
linkActiveClass:'list-active',
routes:[
{
path:'/',
component:user
},
{
path:'/user',
component:user
},
{
path:'/warship',
component:warship
}
]
})
这样虽然加载了子路由,但是它的默认类没跟着过来,然后加了一句redirect:'/user',修改成了这样
修改后:
const router=new VueRouter({
linkActiveClass:'list-active',
routes:[
{
path:'/',
redirect:'/user',
component:user
},
{
path:'/user',
component:user
},
{
path:'/warship',
component:warship
}
]
})
就完美解决了默认路由class没加载的问题。
这个重定向简单来说就是自定义路由指针,就跟js里面修改了引用地址一个道理,虽然表面上看着是个根目录,其实引用的是别的路由界面。
来源:https://segmentfault.com/a/1190000012353669
0
投稿
猜你喜欢
- 一、基础理论1、TensorFlowtensor:张量(数据)flow:流动Tensor-Flow:数据流2、TensorFlow过程Ten
- 结合网上解决方法,总结了一 * 意三点:1.文件名或路径名开头如果会引起转义,则\要替换为\\2.文件不能放在桌面,因为读取时按中文路径3.运
- 映射类型 — dict字典可用多种方式来创建:使用花括号内以逗号分隔键: 值对的方式: {‘jack
- 阅读上一篇:一个完美网站的101项指标.第三部分.易用性 设计体现了一个网站的艺术素养,然而并不是说您应当过分设计,设计风格应结合您的行业,
- 目录引言response响应元组形式响应make_response函数返回json格式数据其他特殊响应redirect() 重定向abort
- 记录一次报错解决方法:No converter found capable of converting from type [java.la
- 选择排序算法步骤:找到数组中最小的那个元素中,将它和数组的第一个元素交换位置,在剩下的元素中找到最小的元素,将它和数组的第二个元素交换位置,
- 效果图:基于d3-v5, 依赖dagre-d3, 直接上代码:<!DOCTYPE html><html lang=&quo
- 本文为官方文档译文,官方文档现已非机器翻译 https://docs.microsoft.com/zh-cn/aspnet/core/fun
- 在升级批处理sql脚本的时候,由于各种编写的不规范、不可重复执行,我们通常希望在sql脚本出错后不中止,而是执行完成。虽然这些问题可通过编写
- 今天偶然看到“一个有将近两年的div + CSS 开发经验和历史,曾经是Web标准绝对拥趸的同志”在自己的blog上发表放弃div+css的
- 可以加入以下3个参数 –without-debug --with-client-ldflags=--all-static,--w
- pyhook下载:http://sourceforge.net/projects/pyhook/files/pyhook/1.5.1/pyh
- 对联代码,查阅它在xhtml下的表达方式,结果很简单了。这是因为,按照标准来说,我们看到的窗体的滚动条不应该是 body 的,而是 HTML
- 根据django官方文档建议,开发过程中会把生成的migrations提交到git中。由于各种原因,会有一些场景需要重置migrations
- 我们知道,关系型数据一般以规范化的形式保存,也就是说你应该尽可能少地重复数据;在正常情况下,表与表之间仅通过各种键值实现关联。进一步地讲,规
- 最小化安装Python8后安装Python3.8.1,网上找了一圈教程,没有一个能完全成功的。或者能安装成功,但pip无法使用。最后根据多个
- 在自动化中, Selenium 自动化测试中有一个名字经常被提及 PageObject( 思想与面向对象的特征相 同 ) ,通常 PO 模型
- keras中正则化(regularization)keras内置3种正则化方法keras.regularizers.l1(lambda)ke
- mysql-proxy实现读写分离MySQL Proxy是一个处于你的client端和MySQL server端之间的简单程序,它可以监测、