Example tutorial summarizing Vue routing jump issues

This article mainly introduces Vuerouting Detailed explanation of jump problem records. The editor thinks it is quite good. Now I will share it with you and give it as a reference. Let’s follow the editor and take a look.

Recently, I need to use Vue to make an app in my project. I encountered the following problems when using routing in Vue.

The routing settings are as follows:

{

path:'/tab',

component:Tab,

children:[{

path:'layoutList',

name:'LayoutList',

component:LayoutList

},{

path:'layoutView/:layoutId',

name:'LayoutView',

component:LayoutView

},{

path:'layoutDetail/:viewId',

name:'LayoutDetail',

component:LayoutDetail

}]

}

/tab is the root address, there are 3 sub-addresses, and the 3 sub-address levels are: LayoutList => LayoutView => LayoutDetail

Normal situation: Assume that the current route is /tab/layoutList and you need to jump to the LayoutView page. You can use router.push({path:'layoutView/'+item.id})

The route after the jump is /tab/layoutView/1

When I want to jump from the LayoutView page to the corresponding LayoutDetail page:

Situation 1: (Page not found)

Address before jump:/tab/layoutView/1

Jump code: router.push({path: 'layoutDetail/'+item.id});

Address after jump:/tab/layoutView/layoutDetail/27

Case 2: (Page not found)

Address before jump:/tab/layoutView/1

Jump code: router.push({path:'/layoutDetail/'+item.id});

Address after jump:/layoutDetail/27

Case 3: (Page not found)

Address before jump:/tab/layoutView/1

Jump code: router.push({path:'tab/layoutDetail/'+item.id});

Address after jump:/tab/layoutView/tab/layoutDetail/ 27

Scenario 4: (The page is displayed normally)

Address before jump:/tab/layoutView/1

Jump code: router. push({path:'/tab/layoutDetail/'+item.id});

Address after jump:/tab/layoutDetail/27

Only according to the operation of case 4, can The page displays normally.

Vue routing will be based on the address of push. If the address does not start with /, it will directly replace the address after the last / of the current route.

If the address starts with /, it will use the address of push. Jump as an absolute address.

In addition, I tried to use router.go({name:'LayoutDetail',params:{viewId:item.id}}), the page will not jump and the address will not change.

The above is the detailed content of Example tutorial summarizing Vue routing jump issues. For more information, please follow other related articles on the PHP Chinese website!