How to jump to other pages for vue

1. Jump without ginseng

Jump to the specified URL, add a new record to the history stack, and click Back to return to the previous page.

// Declarative<router-link :to = "…">
// Programming, the parameter can be a string path or an object describing the address<('/user/index')>
// Write the routing address directlythis.$('/user/index') 
// Address objectthis.$({path:'/user/index'})

2. Jump with ginseng

1. Query transmission

this.$({ path: '/user/index', query: { account: account }})

The parameters passed by query are displayed in the address bar and still exist after refreshing, similar

http://localhost/user/index?account=123

Parameter reception method

watch: {
   $route: {
     handler: function(route) {
       const account =  && ;
       (account)
     },
     immediate: true
   }
}

Or put it increatedin

created() {
   const {params, query} = this.$route;
   (account)
}

Or put it inmountedin

mounted(){
   const account = this.$ && this.$;
   (account)
}

The above writing methods are all OK. Pay special attention to the use of parameter reception$route, not$router.

This.$router is equivalent to a global router object, containing many properties and objects (such as history objects). Any page can call its push, replace, go and other methods.

This.$route represents the current routing object. Each route will have a route object, which is a local object. You can get the corresponding attributes such as name, path, params, query, etc.

2. Params transfer

this.$({ name: 'User', params: { account: account }})

The parameter reception method is similar to the first type, the parameter isparams

watch: {
   $route: {
     handler: function(route) {
       const account =  && ;
   	   (account)
     },
     immediate: true
   }
}

This method will not add parameters after uri, and the refresh will be invalid when passing params;

3. Replace the current page

Replace the last record in the history stack

// Declarative<reouter-link :to="..." replace></router-link>
// Programmingthis.$(...)

The push method can also pass replace, the default value: false

this.$({path: '/homo', replace: true})

4. Jump forward or backward

this.$(n)

Native with js(n)The usage is the same, jump to n pages forward or backward, n is positive and head to the next page, and return to the previous page when it is negative. That is, take a page in front or behind from the history stack.

this.$(1)  // Similar ()this.$(-1) // similar ()

This is the article about how vue jumps to other pages. For more related contents of vue jumps to other pages, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!