Vue Router learning dynamic routing and nesting routing

This article main reference: https: //router.Vuejs.org/en-/essentials/nested-routes.html

The reading premise of this article is that it has been able to build a VUE front program and run. If there is still a construction, you can refer to article:
https://www.jb51.net/Article/111650.htm

Good, below the goods.

First introduces the dynamic route.
Dynamic route, according to my understanding, that is, the jump of the page, for example: the following page:

   
/ hello
If you click / Hello, then the corresponding module is loaded in the router-view, which is the module set in the route.
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}]})

That is to say, it will jump to the two components of Hello and Foo.
 What is the meaning of nesting routing, the first thing I thought is this: / hello / foo and / hello / foo2 These two routing can be short-nest routes, in fact, not. Nested routing is only nested in subcomponents. Then use the route to jump, when this is jumped, only the sub-assembly is changed, and the outer parent components have not changed.   Let's let out the complete example, look at: 
App.Vue


/

/ hello

/ cc
   Export Default {Name: 'app' 
#app {font-family: 'Avenir', Helvetica, Arial, Sans-SeRif; -webkit-font-smoothing: antialiased; -moz-OSX-font-smoothing: grayscale; text-align: center; color: # 2c3e50; margin-top: 60px;}
3434234343
Export Default {Name: 'foo', DATA () {Return {}}} H2, H3 {Font-Weight: Normal;} ul {list-style-type: none; padding: 0; } li {display: inline-block; margin: 0 10px;} a {color: # 42b983;}
Foo2.Vue

 THIS IS FOO2   
Export Default {Name: 'foo2', DATA () {Return {}} }

H2, h3 {font-weight: normal;} ul {list-style-type: none; padding: 0;} li {display: inline-block; margin: 0 10px;} a {color: # 42b983;} Foo3.Vue
THIS FOO3

EXPORT Default {name: ‘foo3’, Data () {Return {}}}
  H2, H3 {font-weight: Normal;} ul {list- STYLE-TYPE: NONE; Padding: 0;} li {display: inline-block; margin: 0 10px;} a {color: # 42b983;}  

{{msg}} Essential Links
Core DOCS

FORUM
   Twitter 

DOCS for this template
VUEX

Vue-loader
aESME-VUE
   / Hello / Foo 

/ Hello / Foo2

I took a screenshot of the page:

  • When clicking on the top / or / hello or / cc, it changes the contents of the red routing. When you click / Hello / Foo / Hello / Foo2 / Hello / Foo3, it changes the contents of the blue routing below. This is similar to our usual application. The outermost layer has changed, or local changes, but does not want overall changes.
  • At the same time, this also complies with modularization, each module is in different modules, respectively.
  • The above is all the content of this article, I hope to help everyone, I hope everyone will support Tumi Clouds.
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment