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() 用法一直,前進(jìn)1，后退-1，當(dāng)前頁面:0

注意使用go時必須是已經(jīng)有訪問歷史記錄了

案例：

<template>
  <div> 
    <button @click="goht">后退<button> <br/>
    <button @click="goqj">前進(jìn)<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)文章

Vue路由守衛(wèi)案例代碼
在Vue中，路由守衛(wèi)分為三種：全局路由守衛(wèi)、獨(dú)享路由守衛(wèi)以及組件內(nèi)路由守衛(wèi)，本文重點(diǎn)介紹Vue路由守衛(wèi)案例代碼,需要的朋友可以參考下
2023-02-02
vue3?自定義指令控制按鈕權(quán)限的操作代碼
這篇文章主要介紹了vue3?自定義指令控制按鈕權(quán)限,為了提高用戶體驗(yàn)，當(dāng)該按鈕無權(quán)使用時，使用el-tooltip功能進(jìn)行提醒，結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2022-10-10
Vue實(shí)現(xiàn)導(dǎo)出excel表格功能
這篇文章主要介紹了Vue實(shí)現(xiàn)導(dǎo)出excel表格的功能，在文章末尾給大家提到了vue中excel表格的導(dǎo)入和導(dǎo)出代碼,需要的朋友可以參考下
2018-03-03
vue 中使用print.js導(dǎo)出pdf操作
這篇文章主要介紹了vue 中使用print.js導(dǎo)出pdf操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
vue實(shí)現(xiàn)搜索功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)搜索功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-05-05
vue 全選與反選的實(shí)現(xiàn)方法(無Bug 新手看過來)
下面小編就為大家分享一篇vue 全選與反選的實(shí)現(xiàn)方法(無Bug 新手看過來)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-02-02
vue鍵盤事件keyup、keydown的作用
這篇文章主要介紹了vue鍵盤事件keyup、keydown的作用,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-12-12
Vue前后端不同端口的實(shí)現(xiàn)方法
今天小編就為大家分享一篇Vue前后端不同端口的實(shí)現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
解決vue cli使用typescript后打包巨慢的問題
這篇文章主要介紹了解決vue cli使用typescript后打包巨慢的問題，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-09-09
vue3獲取當(dāng)前路由地址的兩種方法
近期在做ve3的項(xiàng)目時因?yàn)楣δ苄枰?需要獲取當(dāng)前路由的地址,下面這篇文章主要給大家介紹了關(guān)于vue3獲取當(dāng)前路由地址的兩種方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-10-10