vue vue-router is the official routing manager; using path-to-regexp as a path matching engine, we support many of the advanced configuration mode;
vue-router mode is divided into a total of: hash, history, abstract three kinds;
navigation
vue-router navigation divided into two modes: declarative programming navigation and navigation;
Statement navigation: navigation routing methods by router-link;
Programming navigation: navigation routing methods by the method of router.push;
Programming navigation ways:
1)、router.push('user')；
2)、router.push({path: 'user/1234'})；
3)、router.push({name: 'user', patams: { userId: 1234 }})
4)、router.push({path: 'user/1234', query: {type: test}})
, Name of a method generally used in the program navigation in dynamic routing; dynamic routing i.e. define the route when the route is used in the colon: Path ( ""), such as {name: 'user', path: 'user /: userId '}; after use can not use the name attribute of the path; name actually used mode is a way to route name;
Named routes
The so-called naming routing is actually using the name attribute to the routing tag in the definition of a route when using re-used can be identified by the use of the mark;
Named Views
Sometimes we want to be at the same level display multiple routing components, but do want some way to show the lower right side, and some routes below do not show, so other ways to achieve then might be more trouble, and may also will use various judgments, this time we can use named views will be easy to point the way, that is, add the name attribute on the <router-vew />, so that you can match us in the definition of the following components the name, for example:
{path: 'user', components: { header: Header, container: User, footer: Footer}}
<router-view class=''header" /> <router-view class=''container" /> <router-view class="Footer" />
When we matched routes, if present in the components will be defined in the header display assembly at a position corresponding to the attribute header <router-view class = '' header "/>; a footer and the same container;