What is routing?
1, page jump previously used label or a hyperlink js location.href,routed jump is a jump mode switching assembly
2, the route is changed url monitor and provide a corresponding assembly for a display
3, vue-router route provided by the official,in the url listening vue vue vue-router was provided by the components and provides js show,is one of the most important knowledge point of vue family bucket of
using
the first step: the introduction of
the introduction of vue-router
<script> </ script> tag introduced
step 2: create the component show
the let News = {
Template: "<h1> this is a news page </ h1>"
}
step 3: create routing rules
{
// path is the path to be monitored
path: "/",
// url is monitored Component / index provides for this component is shown as
Component: index
},
Step four: Add the route object created above to Vue examples
// Create routing object the let Router = new new VueRouter ({} routes) new new Vue ({ EL: "#app" , Data: {}, Router })
Step Five: add tags on the page <router-view> </ router-view> routing render component containers
Step 6: <router-link> </ router -link> jump between components
to: set as the branch address and a tag href, jump route
Routing and parameter passing acquisition
First, Found:
used in the appliance
jump by value
1, <router-link to = "? / News type = World News"> News </ Router-Link>
<-Link Router to = "/ Shopping / clothes / red / 18 / West Wing "> product </ Router-Link>
2, and JS control jumps by value
query value transfer path
this $ router.push ({." path ":" news ", query: {type: 'World News'}})
params pass value name
the this $ router.push ({name:. "News", params: {of the type: 1, name: 1, Age: 1, address: 1}})
// the this . $ router.push ( "/ News");
// the this $ router.push. ({path: "/ News"})
. // the this $ router.push ({path: "/ News", Query: { type: 'World News'}})
. router.push the this $ ({name: "Shopping", params: {of the type: "shoes", name: "two dogs", age: 10, address: "409"}} )
. this $ route Found
divided into two Obtaining
params: obtaining dynamic parameters in the routing to: set the parameter xxx
query: obtaining transmission parameters get routing parameter is not set
Note: path with a query by value jump Jump
Jump Jump is a name with a dynamic value-passing params
nested routing
nested routing and routing is really no distinction between just one more children [] package routing only child
{
path: " / index ",
name:" index ",
Component: index,
Children [
{
name:" index-. 1 ",
path:" A ",
Component: A
}, {
name:" index-. 1 ",
path:" A " ,
component: a
}
]
}
routing modular
different modules for different routes document
1, it is necessary to use an empty carrier component as a sub-assembly