Vue路由跳轉(zhuǎn)的4種方式小結(jié)
router-view 實現(xiàn)路由內(nèi)容的地方，引入組件時寫到需要引入的地方，需要注意的是，使用vue-router控制路由則必須router-view作為容器。
通過路由跳轉(zhuǎn)的種四方式
1、 標(biāo)簽路由 router-link
注意：router-link中，鏈接如果是’/'開頭則表示從根路由開始；如果開頭不帶‘/’，則從當(dāng)前路由開始。
（1）不帶參數(shù)
<router-link :to="{name:'home'}">
<router-link :to="{path:'/home'}">
（2）帶參數(shù)
<router-link :to="{name:'home', params: {id:1}}">
// params傳參數(shù) (類似post)
// 路由配置 path: "/home/:id" 或者 path: "/home:id"
// 不配置path ,第一次可請求,刷新頁面id會消失（比如，點擊某件商品圖片的“查看詳情”，跳轉(zhuǎn)到該商品的詳情頁面，剛開始進入詳情頁面時能拿到數(shù)據(jù)（根據(jù)商品id獲?。?，刷新頁面后，id丟失，頁面就取不到相應(yīng)的數(shù)據(jù)了）
// 配置path,刷新頁面id會保留
// html 取參 $route.params.id
// script 取參 this.$route.params.id
<router-link :to="{name:'home', query: {id:1}}">
// query傳參數(shù) (類似get,url后面會顯示參數(shù))
// 路由可不配置
// html 取參 $route.query.id
2、編程式路由 this.$router.push()
（1）不帶參數(shù)
this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})
（2）帶參數(shù)
query傳參
this.$router.push({name:'Home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})
// query傳參數(shù) (類似get,頁面url后面會顯示參數(shù))
// 路由可不配置
// html 取參 $route.query.id
// script 取參 this.$route.query.id
params傳參
this.$router.push({name:'home',params: {id:'1'}}) // 只能用 name
// params傳參數(shù)
// 路由配置 path: "/home/:id"
// 不配置path ,第一次可請求,刷新頁面id會消失
// 配置path,刷新頁面id會保留
// html 取參 $route.params.id
// script 取參 this.$route.params.id
3、this.$router.replace()（與this.$router.push()類似）
4、this.$router.go(n)
this.$router.go(n) 向前或者向后跳轉(zhuǎn)n個頁面，n可為正整數(shù)或負(fù)整數(shù)
5、this.$router.push()、this.$router.replace()、this.$router.go(n)區(qū)別
1、this.$router.push
跳轉(zhuǎn)到指定url路徑，并在history棧中添加一個記錄，點擊后退會返回到上一個頁面
2、this.$router.replace
跳轉(zhuǎn)到指定url路徑，但是history棧中不會有記錄，點擊返回會跳轉(zhuǎn)到上上個頁面 (就是直接替換了當(dāng)前頁面)
3、this.$router.go(n)
向前或者向后跳轉(zhuǎn)n個頁面，n可為正整數(shù)或負(fù)整數(shù)
到此這篇關(guān)于Vue路由跳轉(zhuǎn)的4種方式小結(jié)的文章就介紹到這了,更多相關(guān)Vue路由跳轉(zhuǎn)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了VUE表達(dá)式{{}}中如何拼接字符問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)tab欄切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
Vue3中使用Element?Plus時el-icon無法顯示的問題解決
我們的Vue前端一般都是用的ElementUI,其中按鈕可能用到的比較多,官方里面有自帶的一些默認(rèn)圖標(biāo),下面這篇文章主要給大家介紹了關(guān)于Vue3中使用Element?Plus時el-icon無法顯示的問題解決,需要的朋友可以參考下2022-03-03
vue項目打包過后發(fā)現(xiàn)地址錯了或者發(fā)布到別的服務(wù)器發(fā)現(xiàn)請求的地址不對,每次都要去重新打包,太浪費時間,下面這篇文章主要給大家介紹了關(guān)于Vue項目打包后可修改基礎(chǔ)接口地址配置的具體操作,需要的朋友可以參考下2022-08-08
Vue中transition單個節(jié)點過渡與transition-group列表過渡全過程
這篇文章主要介紹了Vue中transition單個節(jié)點過渡與transition-group列表過渡全過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue Element前端應(yīng)用開發(fā)之前端API接口的封裝
對整個系統(tǒng)來說，一般會有很多業(yè)務(wù)對象，而每個業(yè)務(wù)對象的API接口又有很多。我們這個VUE+Element 前端應(yīng)用就是針對ABP框架的業(yè)務(wù)對象，因此前端的業(yè)務(wù)對象接口也是比較統(tǒng)一的，那么可以考慮在前端中對后端API接口調(diào)用進行封裝，引入ES6的方式進行前端API的抽象簡化。2021-05-05
這篇文章主要介紹了vue-router路由懶加載及實現(xiàn)方式,路由懶加載的主要作用是將 路由對應(yīng)的組件打包成一個個的js代碼塊，只有在這個路由被訪問到的時候，才會加載對應(yīng)組件的代碼塊，需要的朋友可以參考下2022-12-12
Vue?CompositionAPI中watch和watchEffect的區(qū)別詳解
這篇文章主要為大家詳細(xì)介紹了Vue?CompositionAPI中watch和watchEffect的區(qū)別，文中的示例代碼簡潔易懂，希望對大家學(xué)習(xí)Vue有一定的幫助2023-06-06
vue項目完成打包上線的時候很多人都會碰到靜態(tài)資源找不到的情況,下面這篇文章主要給大家介紹了關(guān)于Vite打包項目后圖片丟失的簡單解決方法,需要的朋友可以參考下2023-05-05
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)簡單數(shù)據(jù)雙向綁定，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04