For single page applications , Officially provided vue-router Process route jump , This article is mainly based on its official documents .
install
Based on tradition , I prefer to use npm Installation in the form of package .
npm install vue-router --save
of course , The official has adopted various methods for installation , include bower,cdn etc .
Basic Usage
stay HTML Use in document , Just use v-link this directive Just do it , as ：
Go to view-a
ps: v-link Also support activeClass Used to specify when the link is active css style .replace Attribute is true You can make the link jump without leaving a history .
And in ES5 Used in , You need to create a router instance first , Then pass in the configuration parameters , as ：
var router = new VueRouter();
router.map({
'/view-a': {
component: ViewA
},
'/view-b': {
component: ViewB
}
});
router.start(App, '#app');
Router rules defined above , Map to a component , When you finally start the application , Mount to #app On the element of .
of course , If you want to use ES6 The syntax of , It's also easy to do :
First establish a router module , It is mainly used to configure and bind relevant information
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const router = new VueRouter(); // The configuration parameters of the router can be included here
router.map({
'/view-a': {
component: ViewA
},
'/view-b': {
component: ViewB
}
});
export default router; // Export router
stay app.js Enable the router in the portal startup file
import Vue from 'vue';
import router from './routers';
router.start(App, '#app');
Nested Route
If you want to use nested routing , as /a/b You can update the routing configuration
router.map({
'/a': {
component: A,
subRoutes: {
'/b': {
component: B
}
}
}
});
meanwhile , You need to be in the component A And components B Used in , as ：
assembly A in , Use nested outer chains
This is component A
The router will automatically render the corresponding components and update the routing information .
Which can be passed props, support v-ref, You can also use v-transition and transition-mode To get the scene switching effect , The rendered component will be registered with the parent component this.$ On object .
Route object and route matching
Routing object , Namely $router Will be injected into each component , It can be used to obtain some information . as
attribute
explain
$route.path
The path of the current routing object , as '/view/a'
$rotue.params
About dynamic clips ( as /user/:username) Key value pair information , as {username: 'paolino'}
$route.query
Request parameters , as /foo?user=1 Get query.user = 1
$route.router
Router and component information
$route.matched
array , Contains the configuration parameter object corresponding to all fragments contained in the current matching path .
$route.name
Current path name
of course , You can also define your own routing rules (map) Custom fields when , For special purposes .
The syntax for full match fragments is to use wildcards * as ,/user/*any Will match any /user Path starting with , And give params Object any
The syntax of dynamic fragments is to use : As a sign .
Use path name
When defining path rules , If you provide it with a name attribute , You can use this path rule later , Direct reference .
router.map({
'/user/:userId': {
name: 'user',
component: {...}
}
});
stay v-link Used in
This is a user whose id is 1
You can also use router.go()
router.go({name: 'user', params: {userId: 1}});
Will eventually match /user/1 On this path
Routing options
Routing option name
Default value
effect
hashbang
true
Format path as #! start
history
false
Enable HTML5 history pattern , have access to pushState and replaceState To manage records
abstract
false
Use a browser independent browsing history virtual management backend .
transitionOnLoad
false
Whether to enable scene switching during initial loading
saveScrollPosition
false
On enable html5 history Mode takes effect when , Remember the previous scroll bar position when you use it for backward operation
linkActiveClass
"v-link-active"
When a link is clicked, it needs to be added to v-link On element class class , Default to active
as , I want to use a path formatted and enabled Html5 history Functional router , When the router is initialized , Specify these parameters ：
var router = new VueRouter({
hashbang: true,
history: true
});
Here is just a brief introduction , See here for more options .
last , For more advanced usage, please refer to the official documentation .
Reference documents
Technology