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里面修改了引用地址一个道理，虽然表面上看着是个根目录，其实引用的是别的路由界面。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • Vue.js路由组件vue-router使用方法详解

    使用Vue.js + vue-router 创建单页应用是非常简单的.只需要配置组件和路由映射,然后告诉 vue-router 在哪里渲染即可. 一.普通方式基本例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue-router使用方法</title> </head> <bod

  • Vue实现路由跳转和嵌套

    Vue实现路由跳转和嵌套

    一.配置 Router 用 vue-cli 创建的初始模板里面,并没有 vue-router,需要通过 npm 安装 cnpm i vue-router -D 安装完成后,在 src 文件夹下,创建一个 routers.js 文件,和 main.js 平级 然后在 router.js 中引入所需的组件,创建 routers 对象 import Home from './components/home.vue' const routers = [ { path: '/home', name: 'h

  • 深入理解vue2.0路由如何配置问题

    这两天学习了Vue.js 感觉路由这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. 项目基本手脚架搭建完毕后,建一个router文件夹,里面配置一个index.js文件. 文件内容: npm install vue-router vue-resource --save-dev(安装 vue 路由模块vue-router和网络请求模块vue-resource) import Vue from 'vue' import Router from 'vue-router' (----引入路由

  • vue-router路由简单案例介绍

    vue-router路由简单案例介绍

    官方文档: 旧版:https://github.com/vuejs/vue-router/tree/1.0/docs/zh-cn 新版:http://router.vuejs.org/(2.0版本) 此文是旧版 文件结构图: 基本用法: <router-view>是一个顶级的路由外链,用于渲染匹配的组件. 例如:我的应用入口是app.vue 那么在app.vue中添加如下代码, 此处涉及ES6. app.vue <template> <div class='page inde

  • Vue路由跳转问题记录详解

    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默认路由不加载linkActiveClass问题的解决方法

    vue.js默认路由不加载linkActiveClass问题的解决方法

    发现问题 最近在打开项目的时候,发现我的默认路由没加载上linkActiveClass, 网上一搜,发现很多同学也有这个问题,查了一些资料发现这是个重定向的问题,官网文档是这么写的 https://router.vuejs.org/zh-cn/essentials/redirect-and-alias.html 重定向 重定向也是通过 routes 配置来完成,下面例子是从 /a 重定向到 /b: const router = new VueRouter({ routes: [ { path:

  • 浅谈Vue.js 关于页面加载完成后执行一个方法的问题

    首先我们会想着在mounted或者created里面加入想要执行的方法,但是有的时候会遇到在你执行这个方法的时候,页面还并没有被渲染完成,所以就会出现这个方法在匹配页面标签报错的情况. 解决思路: 1.通过子页面调用父页面的方法,因为在子页面开始渲染的时候,你的父页面肯定是已经渲染好了的,前提这里的方法中是去找寻父页面的标签. 2.直接在本页面监视一个参数,发现参数被初始化了,说明页面也已经加载完成,因为你的页面用到了这个参数. 方法1案例:tab页里的子页面如果没有内容就隐藏 父页面代码 <e

  • Vue.js 使用v-cloak后仍显示变量的解决方法

    Vue.js 使用v-cloak后仍显示变量的解决方法

    Vue.js 使用v-cloak后仍显示变量的解决方法 v-cloak   这个指令是防止页面加载时出现 vuejs 的变量名而设计的,但有时候添加了这个指令仍会显示变量,这是怎么回事呢?. v-cloak 用法: HTML代码: <div v-cloak> {{ message }} </div> CSS代码: [v-cloak] { display: none; } 这样直至div内变量编译完毕后才会显示. 但有时添加完毕后仍有部分变量会显示,这是怎么回事呢?通过控制台查看,原

  • vue.js与element-ui实现菜单树形结构的解决方法

    由于业务需要,要求实现树形菜单,且菜单数据由后台返回,在网上找了几篇文章,看下来总算有了解决办法. 场景:根据业务要求,需要实现活动的树形菜单,菜单数据由后台返回,最后的效果图如下: 后台返回的数据格式是这个样子的: data=[{ pID:'1',//父ID name:'目录一', menuID:'m1',//本身ID isContent:false//判断是否是目录 }, { pID:'1', name:'目录二', menuID:'m2', isContent:false }, { pID

  • Vue.js 前端路由和异步组件介绍

    目录 文章目标 P6 P6+ ~ P7 一.背景 二.前端路由特性 三.面试!!! 四.Hash 原理及实现 1.特性 2.如何更改 hash 3.手动实现一个基于 hash 的路由 五.History 原理及实现 1.HTML5 History 常用的 API 2.pushState/replaceState 的参数 3.History 的特性 4.面试!!! 5.手动实现一个基于 History 的路由 六.Vue-Router 1.router 使用 2.动态路由匹配 3.响应路由参数的变

  • Vue.js框架路由使用方法实例详解

    Vue.js框架路由使用方法实例详解

    Vue.js框架路由使用方法实例详解 html代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name='viewport' content='width=device-width,initial-

  • ajax请求+vue.js渲染+页面加载的示例

    1.导入js <script type="text/javascript" src="<c:url value="/resources/lib/jquery/jquery-1.11.0.min.js" />"></script> <!--标准mui.css--> <link href="<c:url value=" rel="external nofollo

  • 详解Vue.js在页面加载时执行某个方法

    jQuery中可以这样写 vue中,如果要达到相同效果,可以使用vue的生命周期函数,如create或者mounted 附上vue.js的生命周期函数执行流程 总结 以上所述是小编给大家介绍的Vue.js在页面加载时执行某个方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大家对我们网站的支持!

  • vue.js通过路由实现经典的三栏布局实例代码

    vue.js通过路由实现经典的三栏布局实例代码

    经典的三栏布局效果图如下: 三栏布局 •将布局的各个区块定义成组件 <template id="header"> <div class="header bg-primary text-center"> <h3>头部区域</h3> </div> </template> <template id="left"> <div class="left bg-

  • 基于vue 动态加载图片src的解决方法

    基于vue 动态加载图片src的解决方法

    好久没更博了,最近也不知道在忙啥,反正就是感觉挺忙的,在群里看到陆陆续续有刚入vue小伙伴问vue动态加载图片总是404的状况,这篇就简单的说明为什么会出现以及解决办法有哪些. 首先先说明下vue-cli的assets和static的两个文件的区别,因为这对你理解后面的解决办法会有所帮助 assets:在项目编译的过程中会被webpack处理解析为模块依赖,只支持相对路径的形式,如< img src="./logo.png">和background:url(./logo.p

随机推荐