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