Fifth, vue-router named routes and named views (and the summary of learning vue-router)

I have finished dynamic routing, nested routing, etc., here are finished with named routing and named view, the basic usage of vue-router is over.

vue-router named route

① named route is a route name when routers configured to route different definition of the name, this advantage is that you can use in router-linkthe totransmission properties of an object when jumping routes in order to achieve the router.pushsame effect:

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

Equivalent to

router.push({ name: 'user', params: { userId: 123 }})




②First of all, name the goods route in router文件夹下" index.js(It has been named before).

Then go to the test.vuepage and type:

Finally go to the browser to see the effect

Click on the last line to jump

Named view

To put it simply, router-viewdefine different names for different , and render the corresponding components through the names.

example

①router》》index.js routing page, delete all the previous writing and change it to the following:

②Then enter the page where the root route'/' is located, that is app.vue, the first one router-viewwill use the default without naming, and the other two will router-viewadd nameattribute naming.

④Finally we can see the effect.

------------------------------------------------------------------------------------------------------------

Summary of learning vue-router:

The top-level vue sets the default interface, and the default router-view route is displayed.

index.js sets the index router path.

The branch layer vue displays the content of the index jump.

Home→Index→Content