Four ways of vue routing jump (with parameter query)

1、router-link

(1) Without parameters

<router-link :to="{name:'home'}"> 
<router-link :to="{path:'/home'}"> //name,path都行, 建议用name  
// 注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。

(2) With parameters

<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

<router-link :to="{name:'home', query: {id:1}}"> 

// query传参数 (类似get,url后面会显示参数)
// 路由可不配置
// html 取参  $route.query.id
// script 取参  this.$route.query.id

2. this.$router.push() (call inside the function)

(1) Without parameters

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

(2) Query parameter transfer

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

(3) Params pass parameters

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

(4) The difference between uery and params

1. Query is similar to get. After the jump, the parameters will be spliced ​​after the page url, similar to? id=1, can be passed like this if it is not important, the password or the like is still used to refresh the page with params. The id is still there
2. Params is similar to post. After the jump, the parameters will not be spliced ​​after the page url, but the page id will disappear after refreshing the page.

3. this.$router.replace() (the usage is the same as above, push)

4. this.$router.go(n)

5. Difference

1. this.$router.push
   jumps to the specified url path, and wants to add a record to the history stack, click back to return to the previous page
2. this.$router.replace
   jumps to the specified url path, but there will be no record in the history stack. Clicking to return will jump to the previous page (that is, directly replacing the current page)
3. this.$router.go(n)
   Jump forward or backward n pages, n can be a positive or negative integer