5 ways and extensions of Vue routing

There are two forms of routing jump: declarative navigation and programmatic navigation

1. router-link

• Declarative
• prop=> :to=“…”
• Quite similar to (…)

If the link in router-link starts with '/', it starts with the root route

If you start without ' / ', it starts with the current route

example

<template>
  <div>
    router-link The first method
    <router-link :to="{name:'home'}">  
    <router-link :to="{path:'/home'}">
     Name and path are OK, it is recommended to use name
      <router-link :to"{
              name:'page1',
              query:{key:'I'm passing the parameter'}
    }"&gt;
    Pass parameters
    &lt;/router-link&gt;
  &lt;/div&gt;
&lt;/template&gt;

2. this.$()

• Traceable
• Programming
• (…)//The parameter of this method can be a string path, or an object describing the address.
• A new record will be added to the history stack
• Way
  • name
    • route-name
    • params

    //params pass parameters1.Routing configuration：
     name: 'home',
     path: '/home/:id'(orpath: '/home:id')
     2.Jump：
     this.$({name:'home',params: {id:'1'}})
     Notice：
     // Only use name to match routes, not path // Params pass parameters (similar to post) routing configuration path: "/home/:id" or path: "/home:id" otherwise the refresh parameter disappears

  • path
    • router-path
    • query

    //No parameters this.$('/home')
     this.$({name:'home'})
     this.$({path:'/home'})
    //Query pass parameters1.Routing configuration：
     name: 'home',
     path: '/home'
     2.Jump：
     this.$({name:'home',query: {id:'1'}})
     this.$({path:'/home',query: {id:'1'}})
     3.Get parameters
     htmlTake ginseng: $
     scriptTake ginseng: this.$
    

    //Transfer parameters directly through path1.Routing configuration：
    name: 'home',
    path: '/home/:id'
    2.Jump：
    this.$({path:'/home/123'}) 
    or：
    this.$('/home/123') 
    3.Get parameters：
    this.$
    

example

<template>
  <div>
    <vant-button @click='gotoFn1' type="defaullt">
      pushThe second way
    <van-button>
  </div>
</template>

export default{
  name:'page',
  data(){
  },
  methods:{
   gotoFn1(){
      this.$({
        path:'/page',
        query:{key:'I'm passing the parameter'}
      })
      //Push the second route jump method    }
  }
}

3. this.$() (usage the same as push)

• Untraceable
• It does not add new records to history
• Way
  • name
    • route-name
    • params
      • For example

          this.$({
              name:' Home',//The name of the route        params:{
                  site:[],
                  bu:[]
                }
            })
      

      • explain

      params:/router1/:site/:bu
      //The site and bu here are called params

  • path
    • router-path
    • query
      • For example

      this.$({
         path:'/home',
         query:{
          site:[],
          bu:[]
          }
      })
      

      -explain

      query:/router1?id=123
      HereidCalledquery
      

example

<template>
  <div>
    <vant-button @click='gotoFn2' type="defaullt">
      replaceThe third way
    <van-button>
  </div>
</template>

export default{
  name:'page',
  data(){
  },
  methods:{
   gotoFn1(){
      this.$({
        path:'/page',
        query:{key:'I'm passing the parameter'}
      })
      //Replace the third route jump method    }
  }
}

4. this.$(n)

• Equivalent to how many pages the current page jumps forward or backward, similar to (n)m, it can be positive or negative
• $(-1)

example

<template>
  <div>
    <vant-button @click='goBack' type="defaullt">
      The fourth method
    <van-button>
  </div>
</template>

export default{
  name:'page',
  data(){
  },
  methods:{
   goBack(){
      this.$(-1)
       //go The fourth route jump method    }
  }
}

5. location

• The Location object contains information about the current URL
• href
  • Set or return the full URL.
  • Readable readable

    const url=
    

  • writeable

   =''
  

• Refresh the page

Can be accessed using

Extended

The difference between this.$ () and this.$ ()

This.$() jumps to the specified url path and adds a record to the history stack. Click Back to return to the previous page

This.$ () jumps to the specified url path, but there will be no records in the history stack, so when you click the return button, you will directly replace the current page with [the page before the previous page].

The difference between params and query

query is similar to get. After jumping, the parameters will be spliced ​​after the page url, similar to?id=1.

For non-important purposes, you can pass it like this. You should use params for passwords and refresh the page id.

Params are similar to post. After jumping, parameters will not be spliced ​​after the page url.

Summarize:You can use name and path to match the route, and get parameters through this.$, refresh the browser parameters and not lose them.

Only use name to match the route, and no parameters can be obtained through path matching route. The corresponding route configuration path: '/home/:id' or path: 'home:id', otherwise the refresh browser parameters will be lost.

3. Directly pass parameters through the url, push({path: '/home/123'}) or push('/home/123'), and the corresponding route configuration path: '/home/:id', refresh the browser parameters will not be lost.

Summarize

This is the end of this article about 5 ways and extensions of Vue routing. For more related Vue routing content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!