Use of Vuejs routing jump--vue-router

Source: Internet
Author: User

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; //将路由器导出
    1. 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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.