vue route jumps way

There are four ways to jump the route vue

1. router-link

2. this. $ Router.push () (function call inside)

3. this. $ Router.replace () (use the same push)

4. this.$router.go(n)

 

A, with no parameters

1.1 router-link

<Router-link: to = "{name: 'home'}"> <router-link: to = "{path: '/ home'}"> // name, path will do, recommended name // NOTE: If the router-link is a link with '/' is the route starts from the root, if the start without '/', the current route from the start.

 

1.2 this.$router.push()

this.$router.push('/home') this.$router.push({name:'home'}) this.$router.push({path:'/home'})

1.3 this. $ Router.replace () (use the same push)

 

Second, with reference

2.1 router-link

 

<Router-link: to = "{name: 'home', params: {id: 1}}"> // params-parameters (similar post) // routing configuration path: "/ home /: id" or path: "/ home: id" // is not configured path, for the first time may request, refresh the page id will disappear // configuration path, refresh the page id will be reserved // html take ginseng $ route.params.id // script parameters to take this . $ route.params.id <router-link: to = "{name: 'home', query: {id: 1}}"> // query-parameters (similar to get, later displayed url parameter) // route // html take time to configure the parameters $ route.query.id // script parameters to take this. $ route.query.id

 

 

2.2 this.$router.push(query传参 

 

. This $ router.push ({name: 'home', query: {id: '1'}}) this $ router.push (. {Path: '/ home', query: {id: '1'}} ) // html take $ route.query.id // script parameters take this $ route.query.id params reference parameter passing this $ router.push ({name:.. 'home', params: {id: '1' }}) can only be configured with the name // // routing path: "/ home /: id" or path: "/ home: id", // no configuration path, for the first time may request, refresh the page id will disappear / / configuration path, refresh the page id will be reserved // html take ginseng $ route.params.id // script parameters to take this. $ route.params.id

 

2.3 this. $ Router.replace () (use the same push)

 

 

this.$router.go(n)

this. $ router.go (n) this. $ router.go (n) to jump forward or backward n pages, n can be positive or negative integers is

 

the difference:

this. $ router.push jump to a specified url path and would like to add a record in the history stack, click the back will return to the previous page

this. $ router.replace jump to a specified url path, but there will be no record history stack, click Back will jump to the last page (that is a direct replacement for the current page)

this. $ router.go (n) to jump forward or backward a page of n, n can be positive or negative integers

 

__EOF__

Source: Elk Lu yo

Source: https://www.cnblogs.com/miluluyo/p/11190648.html