VueJs Routing Jump Detailed Explanation of vue router

For single-page applications, the official provides vue-router for routing jump processing, and this article is mainly based on its official documents.

Installation

Based on tradition, I prefer to install in the form of npm package.

npm install vue-router --save

Of course, the government has adopted a variety of installation methods, including bower, cdn and so on.

Basic usage

For use in the HTML documentation, you only need to use the v-link directive, such as:

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

ps: v-link also supports activeClass to specify the css style when the link is active. When the replace attribute is true, the link will not leave a history when jumping.

When used in ES5, you need to create a router instance first, and then pass in configuration parameters, such as:

var router = new VueRouter();

router.map({
 '/view-a': {
 component: ViewA
 },
 '/view-b': {
 component: ViewB
 }
});

router.start(App, '#app');

The router rules defined above are mapped to one component, and finally mounted on the elements of # app when the application is started.

Of course, if you want to use the syntax of ES6 for configuration, it is also easy to do it:

Firstly, a router module is established, which mainly configures and binds relevant information

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const router = new VueRouter(); // You can have the configuration parameters of the router here 

router.map({
 '/view-a': {
 component: ViewA
 },
 '/view-b': {
 component: ViewB
 }
});

export default router; // Export the router 

Enable the router in the app. js entry startup file

import Vue from 'vue';
import router from './routers';

router.start(App, '#app');

Nested routing

If you want to use nested routing, such as/a/b, you 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 the component A, nested outer chains are used

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

The router will automatically render the corresponding components and update the routing information.

Among them < router-view > props can be passed to support v-ref, and v-transition and transition-mode can also be used to obtain scene switching effect. The rendered component will be registered on the this. $object of the parent component.

Routing Object and Routing Matching

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

属性	说明
$route.path	当前路由对象的路径，如'/view/a'
$rotue.params	关于动态片段（如/user/:username)的键值对信息,如{username: 'paolino'}
$route.query	请求参数，如/foo?user=1获取到query.user = 1
$route.router	所属路由器以及所属组件信息
$route.matched	数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
$route.name	当前路径名字

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

The syntax for a fully matched fragment is to use wildcard characters * For example, /user/*any will match any path beginning with/user, and assign an attribute any to the params object

The syntax of dynamic fragments is to use: as a flag.

Use path names

When defining a path rule, if you provide it with an name attribute, you can refer to it directly when using this path rule later.

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

Used in v-link

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

You can also use router. go ()

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

0

It will eventually match to the path/user/1

Routing options

路由选项名	默认值	作用
hashbang	true	将路径格式化为#!开头
history	false	启用HTML5 history模式，可以使用pushState和replaceState来管理记录
abstract	false	使用1个不依赖于浏览器的浏览历史虚拟管理后端。
transitionOnLoad	false	初次加载是否启用场景切换
saveScrollPosition	false	在启用html5 history模式的时候生效，用于后退操作的时候记住之前的滚动条位置
linkActiveClass	"v-link-active"	链接被点击时候需要添加到v-link元素上的class类,默认为active

For example, if I want to use a router with path formatting and Html5 history enabled, I can specify these parameters when the router initializes:

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

1

Here is just a brief introduction. Finally, please refer to the official documents for more advanced usage.