Use of Vue-cli Router

After using this Vue-cli for a long time, you can't even get started. To avoid forgetting it, it is necessary to remember it.

 

About the use of the router in Vue-CLI ,,

I store all the pages in the components folder,

Use index. js in the router folder to direct the route

Use app. vue to control the router by pointing

 

App. vue

==============

<Router-link: To = "{Name: 'about'}"> about </router-link>

<Router-link: To = "{Name: 'version'}"> version </router-link>

<Router-View/>

 

 

Router-> index. js

==============

Import home from '@/components/home'

Import about from '@/components/about'

Import version from '@/components/version'

 

Export default new router ({

Routes :[

{Path: '/user/: id', component: Home,

Children :[

{Path: 'about', name: 'about', component: about },

{Path: 'version', name: 'version', component: Version}

]

}

]

})

 

Components-> Home. vue

As a parent-level control, it must contain the router-view command; otherwise, it cannot be displayed,

==============

<Div>

I am home

<Router-View> </router-View>

</Div>

 

The display logic of Vue-CLI is:

======================================

App. vue [router-View]

L home. vue [router-View] -- parent node-displays child nodes through router-View

L about. vue -- children displays the child nodes on the parent node

L version. vue -- the Child Nodes Displayed by children are displayed by the parent node

Use of Vue-cli Router