Home Web Front-end JS Tutorial Problem about default route not loading in vue.js

Problem about default route not loading in vue.js

Jun 21, 2018 pm 04:02 PM
vue vue2

This article mainly introduces to you the solution to the problem that vue.js default route does not load linkActiveClass. The article introduces it in great detail through sample code. It has certain reference learning value for everyone's study or work. Friends who need it Let’s take a look together below.

Found the problem

When I opened the project recently, I found that my default route did not load linkActiveClass,

After searching online, I found that many students also have this problem. After checking some information, I found that it is a redirection problem. The official website document says this
https://router.vuejs.org/ zh-cn/essentials/redirect-and-alias.html

Redirect

Redirection is also accomplished through routes configuration, as shown in the following example Is redirecting from /a to /b:

const router = new VueRouter({
routes: [
{ path: '/a', redirect: '/b' }
]
})
Copy after login

The redirect target can also be a named route:

const router = new VueRouter({
routes: [
{ path: '/a', redirect: { name: 'foo' }}
]
})
Copy after login

or even a method that dynamically returns the redirect target:

const router = new VueRouter({
routes: [
{ path: '/a', redirect: to => {
// 方法接收 目标路由 作为参数
// return 重定向的 字符串路径/路径对象
}}
]
})
Copy after login

My code originally looked like this:

const router=new VueRouter({
linkActiveClass:'list-active',
routes:[
{
 path:'/',
 component:user
},
{
 path:'/user',
 component:user
},
{
 path:'/warship', 
 component:warship
}
]
})
Copy after login

In this way, although the sub-route is loaded, its default class does not follow, and then I added One sentence redirect:'/user', modified to look like this

After modification:

const router=new VueRouter({
linkActiveClass:'list-active',
routes:[
{
 path:'/',
 redirect:'/user',
 component:user
},
{
 path:'/user',
 component:user
},
{
 path:'/warship', 
 component:warship
}
]
})
Copy after login

This perfectly solves the problem that the default routing class is not loaded question.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to implement nav navigation bar using vue

How to use iframe elements in vue components

How to load components webpack require.ensure in vue

How to implement form response in Angular4

The above is the detailed content of Problem about default route not loading in vue.js. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to use echarts in vue How to use echarts in vue May 09, 2024 pm 04:24 PM

How to use echarts in vue

The role of export default in vue The role of export default in vue May 09, 2024 pm 06:48 PM

The role of export default in vue

How to use map function in vue How to use map function in vue May 09, 2024 pm 06:54 PM

How to use map function in vue

The difference between event and $event in vue The difference between event and $event in vue May 08, 2024 pm 04:42 PM

The difference between event and $event in vue

The role of onmounted in vue The role of onmounted in vue May 09, 2024 pm 02:51 PM

The role of onmounted in vue

The difference between export and export default in vue The difference between export and export default in vue May 08, 2024 pm 05:27 PM

The difference between export and export default in vue

What are hooks in vue What are hooks in vue May 09, 2024 pm 06:33 PM

What are hooks in vue

Onmounted in vue corresponds to which life cycle of react Onmounted in vue corresponds to which life cycle of react May 09, 2024 pm 01:42 PM

Onmounted in vue corresponds to which life cycle of react

See all articles