vue路由跳轉的幾種方式及引數獲取

2021-10-11 16:22:01 字數 1112 閱讀 4051

vue路由跳轉可以通過name跳轉頁可以通過path跳轉,帶引數的話引數可以封裝在params中也可以封裝在query中。

1)params傳引數:類似post,html 取參 $route.params.id,script 取參 this.$route.params.id,重新整理頁面引數消失;

2)query傳引數: 類似get,url後面會顯示引數,html 取參 $route.query.id,script 取參 this.$route.query.id,重新整理頁面引數還在。

舉例:跳轉頁面:

methods:

});}

}

接收頁面:

export default ;

},created()

};

一、router-link

1、不帶引數:name,path都行, 建議用name

(1)name方法:

2、帶引數:

(1)query傳參:路由可不配置

(2)params傳參:路由配置 path: "/home/:id" 或者 path: "/home:id"。不配置path ,第一次可請求,重新整理頁面id會消失;配置path,重新整理頁面id會保留。

二、this.$router.push() (函式裡面呼叫):

1、不帶引數:

(1)this.$router.push('/home')

(2)this.$router.push()

(3)this.$router.push()

2、帶引數:

(1)query傳參:name、path都可以用

1)this.$router.push(})

2)this.$router.push(})

(2)params傳參:只能用 name

this.$router.push(}) 

三、this.$router.replace:用法同上push

this.$router.go(-1)
區別:

vue路由跳轉方式

vue路由跳轉方式有四種,具體如下 1 router link 1.1.不帶引數 params傳引數 類似post 路由配置 path home id 或者 path home id 不配置path 第一次可請求,重新整理頁面id會消失,配置path,重新整理頁面id會保留。html取參 route...

vue路由跳轉的方式

vue路由跳轉有四種方式 1.router link 2.this.router.push 函式裡面呼叫 3.this.router.replace 用法同push 4.this.router.go n 一 不帶參 1.1 router link router link to router link...

vue路由跳轉的方式

vue路由跳轉有四種方式 1.router link 2.this.router.push 函式裡面呼叫 3.this.router.replace 用法同push 4.this.router.go n 一 不帶參 1.1 router link name,path都行,建議用name 注意 rou...