Detailed explanation of vue router dynamic routing and nested routing examples

This article mainly introduces vue router dynamic routing and nested routing to you. It introduces the use of dynamic routing and nested routing in detail. If you are interested, you can learn more. I hope it can help you.

First introduce dynamic routing.
According to my understanding, dynamic routing means that it can jump to the page. For example: in the following page:

##

If you click /hello, Then the corresponding module will be loaded in router-view, which is the module set in the routing.

import Vue from 'vue' 
import Router from 'vue-router' 
import Hello from '@/components/Hello' 
import Foo from '@/components/Foo' 
import Foo2 from '@/components/Foo2' 
import Foo3 from '@/components/Foo3' 
 
Vue.use(Router) 
 
export default new Router({ 
 routes: [ 
  {path: '/', redirect: '/hello'}, 
  { 
   path: '/hello', 
   component: Hello, 
   children: [ 
    {path: '/hello/foo', component: Foo}, 
    {path: '/hello/foo2', component: Foo2}, 
    {path: '/hello/foo3', component: Foo3} 
   ] 
  }, 
  { 
   path: '/cc', 
   name: 'Foo', 
   component: Foo 
  } 
 ] 
})

In other words, it will jump to the two components Hello and Foo.

So what does nested routing mean? At first I thought it was this: the two routes /hello/foo and /hello/foo2 can be abbreviated as nested routing, but in fact they are not. Nested routing only nests components again within child components. Then use routing to jump, so that when jumping, only the child components change, and the outer parent component does not change.

I will post the complete example below, take a look:

App.vue

Foo.vue

Foo2.vue

Foo3.vue

Hello.vue

Routing:

##

import Vue from 'vue' 
import Router from 'vue-router' 
import Hello from '@/components/Hello' 
import Foo from '@/components/Foo' 
import Foo2 from '@/components/Foo2' 
import Foo3 from '@/components/Foo3' 
 
Vue.use(Router) 
 
export default new Router({ 
 routes: [ 
  {path: '/', redirect: '/hello'}, 
  { 
   path: '/hello', 
   component: Hello, 
   children: [ 
    {path: '/hello/foo', component: Foo}, 
    {path: '/hello/foo2', component: Foo2}, 
    {path: '/hello/foo3', component: Foo3} 
   ] 
  }, 
  { 
   path: '/cc', 
   name: 'Foo', 
   component: Foo 
  } 
 ] 
})

It should be noted that you should look carefully at App.vue and Hello.vue, both contain 975b587bf85a482ea10b0a28848e78a4dd6e4ababe59793a4ac75fb9e5c5550e, but their functions are different. App.vue is the top-level route, which refers to the route outside the group. In Hello.vue, it is Nested routing, responsible for displaying child components.

I will take a screenshot of the page:

In this interface, when you click / or /hello or /cc at the top, what changes is the content in the red route . When clicking /hello/foo /hello/foo2 /hello/foo3, what changes is the content in the blue route below.

This is very similar to our daily application. There are changes in the outermost layer, or there are changes locally, but we don't want the global changes to occur.

At the same time, this also conforms to modularity, and each module is in a different module.

Related recommendations:

nginx_lua case analysis: dynamic routing implementation

The above is the detailed content of Detailed explanation of vue router dynamic routing and nested routing examples. For more information, please follow other related articles on the PHP Chinese website!