In Vue2.0 route jump, in addition to using

to create a tag to define the navigation link, we can also use the router instance method, by writing code to achieve this.

router.push(location)
Copy the code

To navigate to different urls, use the router.push method. This method adds a new record to the history stack, so when the user clicks the browser back button, it returns to the previous URL.

This method is called internally when you click

, so click

is equivalent to calling router.push(…) .

  • Declarative:<router-link :to="..." >
  • Programmatic:router.push(...)

The argument to this method can be a string path or an object describing the address.

/ / string
router.push('home')
 
/ / object
this.$router.push({path: '/login? url=' + this.$route.path});
 
// Named route
router.push({ name: 'user', params: { userId: 123 }})
 
// With query parameters, become /backend/order? selected=2
this.$router.push({path: '/backend/order', query: {selected: "2"}});
 
// Set query parameters
this.$http.post('v1/user/select-stage', {stage: stage})
      .then(({data: {code, content}}) => {
            if (code === 0) {
                / / object
                this.$router.push({path: '/home'});
            }else if(code === 10) {// With query parameters, change to /login? stage=stage
                this.$router.push({path: '/login', query:{stage: stage}}); }});// Design the query parameter object
let queryData = {};
if (this.$route.query.stage) {
    queryData.stage = this.$route.query.stage;
}
if (this.$route.query.url) {
    queryData.url = this.$route.query.url;
}
this.$router.push({path: '/my/profile', query: queryData});
Copy the code

With the replace attribute, when clicked, router.replace() is called instead of router.push(), so no history is left after navigation. Clicking the back button will not return you to this page.

// With replace: true, it does not add a new record to 'history', but replaces the current history record with its method name.
 this.$router.push({path: '/home', replace: true})
 // If it is declarative, write it like this:
 <router-link :to="..." replace></router-link>
 // Program:
 router.replace(...)
Copy the code

Integrated case

 this.$router.push({path: '/coach/' + this.$route.params.id, query: queryData});
Copy the code
  1. Click to return to the previous page
<button @click="goback">goback</button>
methods:{
  goback(){
  	this.$router.go(- 1)}}Copy the code

  1. Click to jump to the /Foo2 page

 <button @click="ToLink1">goback</button>
 ToLink1(){
   this.$router.push('/foo2')}Copy the code

Or the method of the this.$router.push({name:’Foo2′}) object.

Develop reading

The basic modes of vUE route parameter transmission

1, dynamic routing (page refresh data is not lost)

Methods: {insurance(id) {
       // Call $router.push directly to jump with parameters
        this.$router.push({
          path: `/particulars/${id}`})},Copy the code

The routing configuration

{
     path: '/particulars/:id'.name: 'particulars'.component: particulars
   }
Copy the code

The receive page is received with this.$route.params.id

2. The route name matches and the parameter is passed through params

Methods: {insurance(id) {
       this.$router.push({
          name: 'particulars'.params: {
            id: id
          }
        })
  }
Copy the code

The routing configuration

 {
     path: '/particulars'.name: 'particulars'.component: particulars
   }
Copy the code

This.$route.params.id is also used to receive arguments

3, Route path path match,

Pass parameters through query, in which case the parameters passed by Query are displayed after the URL? Id =?

Methods: {insurance(id) {
        this.$router.push({
          path: '/particulars'.query: {
            id: id
          }
        })
  }
Copy the code

The routing configuration

{
     path: '/particulars'.name: 'particulars'.component: particulars
   }
Copy the code

This.$route.query.id receives the parameter

Query (params); query (params);

  1. On the usage

Query = path; params = name; this.$route.query.name; this.$route.params.name;

$router = $route; $router = $route;

  1. On the show

Query is more like get in Ajax, and Params is more like POST. The former displays the parameters in the browser address bar, while the latter does not.