Use of Vuejs routing jump--vue-router

For single-page applications, the official provides the vue-router processing of routing jumps, this article is mainly based on their official document writing.

Installation

Based on tradition, I prefer to install in the form of NPM packages.

npm install vue-router --save

Of course, there are many ways to install the official, including bower , and cdn so on.

Basic usage

For use in HTML documents, just use v-link this directive, such as:

<a v-link="{path: ‘/view-a‘}">Go to view-a</a>

? PS: v-link also supports activeclass for specifying CSS styles when links are active. The replace property allows true the link to not leave a history when it jumps.

For use in ES5, you need to create a router instance and then pass in the configuration parameters, such as:

var router = new VueRouter();router.map({  ‘/view-a‘: {    component: ViewA  },  ‘/view-b‘: { component: ViewB }});router.start(App, ‘#app‘);

The above-defined router rules take the form of mapping to a component, and the last time the application is launched, it is mounted #app on the element.

Of course, if you want to use ES6 syntax for configuration, it's also easy to do:

1. First set up a router module, mainly to configure and bind related information

import Vue from ‘vue‘;import VueRouter from ‘vue-router‘;Vue.use(VueRouter);const router = new VueRouter(); //这里可以带有路由器的配置参数router.map({ ‘/view-a‘: { component: ViewA }, ‘/view-b‘: { component: ViewB }});export default router; //将路由器导出

2. app.jsenable the router in the Portal startup file

import Vue from ‘vue‘;import router from ‘./routers‘;router.start(App, ‘#app‘);

Nested routines by

If you want to use nested routines, you /a/b can update the routing configuration

router.map({  ‘/a‘: {    component: A,    subRoutes: {      ‘/b‘: {        component: B } } }});

At the same time, you need to use it in component A and component B <router-view> , such as:

<div id="app">  <router-view></router-view></div>

In component A, use nested outer chains

<div id="A">  <h1>    This is component A  </h1> <router-view></router-view></div>

The router automatically renders the corresponding components and updates the routing information.

It <router-view> can pass props, support v-ref , and can also use v-transition and transition-mode to get the scene transition effect, the rendered component will be registered to the parent component of the this.$ object.

Routing objects and route matching

The routing object, which is $router injected into each component, can be used to obtain some information. Such as

Properties	Description
$route. Path	The path to the current route object, such as '/view/a '
$rotue. Params	About key-value pair information for dynamic fragments (such as/user/ :username ), such as {username: ' Paolino '}
$route. Query	Request parameters, such as /foo?user=1 get to query.user = 1
$route. Router	Owning router and owning component information
$route. Matched	Array that contains the configuration parameter objects for all fragments contained in the currently matched path.
$route. Name	Current path name

Of course, you can also customize the fields when you define the routing rules ( map ) for special purposes.

The syntax for a fully matched fragment is to use wildcards * such as to /user/*any match any path that begins with/user and params assign a property to the objectany

The syntax of a dynamic fragment is used : as a flag.

Use path name

When you define a path rule, if you provide it with a name property, you can refer to it directly when you use the path rule later.

router.map({  ‘/user/:userId‘: {    name: ‘user‘,    component: {...}  }});

In the v-link use of

<a v-link="{name: ‘user‘, params: {userId: 1}">This is a user whose id is 1</a>

You can also userouter.go()

router.go({name: ‘user‘, params: {userId: 1}});

Will eventually be matched to /user/1 this path.

Routing options

Routing Option name	Default Value	function
Hashbang	True	Format the path as the #! beginning
History	False	Enable HTML5 history mode, you can use Pushstate and replacestate to manage records
Abstract	False	Use a browser-independent browsing history virtual management backend.
Transitiononload	False	Whether to enable scene switching for initial load
Savescrollposition	False	Take effect when HTML5 history mode is enabled, remember the previous scroll bar position when you use the back operation
Linkactiveclass	"V-link-active"	The class class that the link needs to be added to v-link the element when clicked, by defaultactive

For example, if I want to use a router with a path format and enable the HTML5 history feature, you can specify these parameters when the router initializes:

var router = new VueRouter({  hashbang: true,  history: true});

Here are just a few simple introductions, more options for their reference here.

Finally, for more advanced usage please refer to the official documentation.

SCQ000
Links: https://www.jianshu.com/p/cb918fe14dc6
Source: Pinterest
The copyright of the book is owned by the author, and any form of reprint should be contacted by the author for authorization and attribution.

Use of Vuejs routing jump--vue-router