快捷導(dǎo)航

vue常見路由跳轉(zhuǎn)的幾種方式小結(jié)

更新時間：2023年09月05日 09:01:46 作者：要加油哦～

本文主要介紹了常見路由跳轉(zhuǎn)的幾種方式，主要介紹了四種常見方式，具有一定的參考價值，感興趣的可以了解一下

常見的路由跳轉(zhuǎn)有以下四種：

1. <router-link to="跳轉(zhuǎn)路徑">

/* 不帶參數(shù) */
<router-link :to="{name:'home'}">
<router-link :to="{path:'/home'}">
// 更建議用name
// router-link鏈接中，帶'/' 表示從根路徑開始，不帶 表示從當(dāng)前路由開始
/* 帶參 */
// 1. params傳參
<router-link :to="{name:'home', params: {id:1}}">
// 路由配置 用 path: "/home/:id" 或者 path: "/home:id"
// 配置path，刷新頁面參數(shù)保留；不配置path，刷新頁面后 參數(shù)會消失
// html 取參 $router.params.id
// script 取參 this.$router.params.id
// 2 query傳參
<router-link :to="{name:'home', query: {id:1}}">
// 路由可不配置
// html 取參 $router.query.id
// script 取參 this.$router.query.id

也可，如

2. this.$router.push() 跳轉(zhuǎn)到指定的url，并在history中添加記錄（即，點擊回退，會退回上一個頁面）。

/* 不傳參 或 query傳參 */
this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})
this.$router.push({name:'home', query: {id:'1'}})
this.$router.push({path:'/home', query: {id:'1'}})
/* params傳參 */
this.$router.push({name:'home', params: {id:'1'}})
this.$router.push({path:'/home', params: {id:'1'}})
//注： params傳參只能用name
//配置path，刷新頁面參數(shù)保留；不配置path，刷新參數(shù)消失
/* query和params的區(qū)別 */
// query類似于 get 請求，跳轉(zhuǎn)后頁面url會拼接參數(shù)，如?id=1。-->適用于 非重要的參數(shù)
// params 類似于post，不拼接參數(shù)，刷新頁面后參數(shù)消失。--->適用于 安全性較高的參數(shù)，如密碼

html中，如：