Vue 動態(tài)設(shè)置路由參數(shù)的案例分析
更新時間：2018年04月24日 11:50:44 作者：圓夢人生
這篇文章主要介紹了Vue 動態(tài)設(shè)置路由參數(shù)的案例分析,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
在vue中 可以動態(tài)設(shè)置路由參數(shù)：
1.使用this.$router.go()，與js histroy.go() 用法一直,前進1，后退-1，當(dāng)前頁面:0
注意 使用go時 必須是已經(jīng)有訪問歷史記錄了
案例：
<template>
<div>
<button @click="goht">后退<button> <br/>
<button @click="goqj">前進<button> <br/>
<button @click="gosx">刷新當(dāng)前<button>
</div>
</template>
<script>
export default {
methods: {
goht(){
this.$router.go(-1);
},
goqj(){
this.$router.go(1);
},
gosx(){
this.$router.go(0); //或者 this.$router.go();
}
}
}
</script>
2.使用push調(diào)用：
案例
<template>
<div>
<button @click="pageA">去A頁面</button> <br/>
<button @click="pageB">去B頁面</button> <br/>
</div>
</template>
<script>
exprot default {
methods: {
pageA(){
//去路由A頁面，字符串形式只能是path，類似to="path"
this.$router.push('/RouterA');
},
pageB(){
//去路由B頁面，數(shù)組形式，類似 :to="{}"
this.$router.push(
{
name: 'RouterB',
query: {'name': 'name1', title: 'title1'}
//,params:{'name': 'name2', title: 'title2'}
}
);
}
}
}
</script>
總結(jié)
以上所述是小編給大家介紹的Vue 動態(tài)設(shè)置路由參數(shù)的案例分析，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
Vue3+Vite+TS使用elementPlus時踩的坑及解決
這篇文章主要介紹了Vue3+Vite+TS使用elementPlus時踩的坑及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
詳解vite2.0配置學(xué)習(xí)(typescript版本)
這篇文章主要介紹了詳解vite2.0配置學(xué)習(xí)(typescript版本)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
這篇文章主要介紹了原理深度解析Vue的響應(yīng)式更新比React快，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
關(guān)于Vue3中element-plus的el-dialog對話框無法顯示的問題及解決方法
最近今天在寫一個停車場管理系統(tǒng)的項目時,在用vue3寫前端時,在前端模板選擇上,我一時腦抽,突然決定放棄SpringBoot,選擇了以前幾乎很少用的element-plus,然后果不其然,錯誤連連,下面給大家分享dialog對話框無法顯示的原因,感興趣的朋友一起看看吧2023-10-10
這篇文章主要給大家介紹了關(guān)于Vue-Router的相關(guān)資料,vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,適合用于構(gòu)建單頁面應(yīng)用,本文通過示例代碼介紹的非常詳細,需要的朋友可以參考下2021-08-08
這篇文章主要介紹了vuex中g(shù)etters的基本用法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
vue 使用插槽分發(fā)內(nèi)容操作示例【單個插槽、具名插槽、作用域插槽】
這篇文章主要介紹了vue 使用插槽分發(fā)內(nèi)容操作,結(jié)合實例形式總結(jié)分析了vue.js使用單個插槽、具名插槽、作用域插槽相關(guān)操作技巧與注意事項,需要的朋友可以參考下2020-03-03
這篇文章主要介紹了vue自定義keepalive組件的相關(guān)資料,keep-alive組件是使用?include?exclude這兩個屬性傳入組件名稱來確認哪些可以被緩存的，本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧2022-07-07
這篇文章主要介紹了通過vue寫一個瀑布流插件代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-09-09
這篇文章主要介紹了vue中的keep-alive實例代碼，vue實現(xiàn)組件信息緩存的方法，在文中也給大家提到,需要的朋友可以參考下2018-07-07