Detailed explanation of routing jump parameter passing method in Vue

1. Routing jump

Routing jumps in Vue are mainly divided into two ways:

1. Declarative Routing Navigation ( <router-link>)

2. Programmatic route navigation (js way)

2. Declarative Routing Navigation

<router-link>

        1. Jump without parameters

<router-link :to="{name: 'home' }" > </router-link>
<router-link :to="{path: '/home'}" > </router-link>
// name, path都行, 建议用name 
<router-link :to="{name: 'home'}" tag='li'> </router-link>

Notice:

1. <router-link> If the middle link  / starts, it starts from the root route. If it does not start  /, it starts from the current route.
2. <router-link>It will be parsed into  a tags by default, and you can  tag specify it to be parsed into other tags through attributes

        2. Jump with parameters

                 paramsway parameter

<router-link :to="{name: 'home', params: {id:1}}"> 
// params 传参数 (类似post)
// 路由配置path: "/home/:id" 或者 path: "/home:id" 
// 不配置path: 第一次可请求, 刷新页面id会消失
// 配置path: 刷新页面id会保留
// html取参: $route.params.id
// script取参: this.$route.params.id

                queryWay parameter:

<router-link :to="{name: 'home', query: {id:1}}"> 
// query传参数 (类似get, url后面会显示参数)
// 路由可不配置
// html取参: $route.query.id
// script取参: this.$route.query.id

3. Programmatic Routing Navigation

1. this.$router.push()

Click the routing link to jump to a new page and return to the current routing interface

        1. Jump without parameters

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

        2. Jump with parameters

                Pass parameters in query mode:

this.$router.push({name:'home', query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})
// html取参: $route.query.id
// script取参: this.$route.query.id

                Pass parameters in params mode:

this.$router.push({name:'home',params: {id:'1'}})
// 只能用 name
// 路由配置path: "/home/:id" 或者 path: "/home:id",
// 不配置path, 第一次可请求, 刷新页面id会消失
// 配置path, 刷新页面id会保留
// html取参, $route.params.id
// script取参, this.$route.params.id

The difference between query and params

query is similar to get, after the jump, the page url will be spliced ​​with parameters, similar to ?id=1, non-important ones can be passed in this way, passwords and the like should berefreshed with params and the page id is still there;
params is similar to post, after the jump, the page url is behind The parameters will not be spliced, but the id will disappear when the page is refreshed.

2. this.$router.replace()
replaces the current route with a new route, and cannot return to the current route interface

The specific usage is the same as above this.$router.push()

3. this.$router.back()
requests (returns) the previous record route

4. this.$router.go(n)
jump forward or backward n pages, n can be positive or negative integer

// 请求(返回)上一个记录路由
this.$router.go(-1)
// 请求下一个记录路由
this.$router.go(1)

The above four methods distinguish
this.$router.push:

Jump to the specified url path, and add a record to the history stack, click back to return to the previous page ==>> queue mode (first in, first out)

this.$router.replace：

Jump to the specified url path, but there will be no records in the history stack, click back to jump to the previous page (that is, directly replace the current page) ==>> stack method (first in, last out)

this.$router.back：

Request (return) previous record route

this.$router.go：

Jump forward or backward n pages, n can be positive or negative integer