Vue中實現(xiàn)路由跳轉傳參的4種方式

更新時間：2024年04月10日 09:42:38 作者：儒雅的烤地瓜

本文詳盡的講了在Vue項目中,如何實現(xiàn)路由跳轉傳參的4四種方式（2大路由跳轉方式,每種方式包括4種路由傳參實現(xiàn)形式）,以及每種方式中實現(xiàn)路由跳轉包括路由傳參的方法的各種寫法,需要的朋友可以參考下

前言

本文詳盡的講了在Vue項目中，如何實現(xiàn)路由跳轉傳參的4四種方式（2大路由跳轉方式，每種方式包括4種路由傳參實現(xiàn)形式），以及每種方式中實現(xiàn)路由跳轉包括路由傳參的方法的各種寫法，說實話，不能再詳細了！

一、使用vue-router構造函數(shù)

vue-router 本質是一個第三方的包，用的時候需要下載。

步驟（7步法）：

1. 下載 vue-router 模塊到當前工程

yarn add vue-router

2. 在src/main.js中引入VueRouter函數(shù)

// 引入路由
import VueRouter from "vue-router";

3. 在src/main.js中使用Vue.use()方法注冊全局VueRouter

添加VueRouter到Vue.use()身上，注冊全局RouterLink和RouterView組件

// 注冊全局
Vue.use(VueRouter)

4. 在src/main.js中創(chuàng)建路由規(guī)則數(shù)組：路由字典 – 路徑和組件名對應關系

什么是路由字典: 專門保存地址欄中相對路徑與組件對象之間對應關系的一個數(shù)組。

創(chuàng)建路由字典（需要準備切換的頁面組件）把準備好的頁面組件導入到main.js中

const routes = [
  {
    path: "/",
    redirect: "find", //默認顯示推薦組件(路由的重定向)
  },
  {
    path: "/find",
    name: "Find",
    component: Find, //二級路由
    children: [
      {
        path: "/",
        redirect: "recom", //默認顯示推薦組件
      },
      {
        path: "ranking", //注意二級路由的路徑千萬不要加/
        component: Ranking,
      },
      {
        path: "songlist",
        component: SongList,
      },
    ],
  },
  {
    path: "/my",
    name: "My",
    component: My,
  },
  {
    path: "/part",
    name: "Part",
    component: Part,
  },
 
  {
    path: "*", //也可以寫為"/*" 
    component: NotFound, //定義找不到已有組件時顯示404
  },
];

5. 在main.js中使用VueRouter構造函數(shù)生成路由對象

什么是路由(器)對象: 專門負責監(jiān)控地址欄變化，并根據(jù)地址欄變化查找對應組件，替換頁面中router-view的核心對象

// 使用new調用VueRouter構造函數(shù)創(chuàng)建路由對象并且傳入規(guī)則
const router = new VueRouter({ // 
  routes,
  mode: "history", //路由模式(默認為hash模式)
});

番外：路由模式

(1) hash —— 即地址欄 URL 中的 # 符號
hash 模式下，僅 hash 符號之前的內(nèi)容會被包含在請求中，如 http://www.abc.com，因此對于后端來說，即使沒有做到對路由的全覆蓋，也不會返回 404 錯誤。

(2) history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState()方法
history 模式下，前端的 URL 必須和實際向后端發(fā)起請求的 URL 一致，如http://www.abc.com/book/id。如果后端缺少對 /book/id 的路由處理，將返回 404 錯誤。

6. 在main.js中把路由對象注入到new Vue實例中

new Vue({
  router, //導入路由對象
  render: (h) => h(App),
}).$mount("#app");

7. 用router-view作為掛載點, 切換不同的路由頁面

當?shù)刂窓谥衭rl的相對路徑切換時，router對象會自動獲得新的相對地址。自動去routes中查找對應的組件對象。最后用找到的組件對象代替<router-view>的位置。

router-view 實現(xiàn)路由內(nèi)容的地方，引入組件時寫到需要引入的地方。需要注意的是，使用vue-router控制路由則必須以router-view標簽作為容器。（可以先引入根組件App.vue中進行自測）

項目入口文件：main.js

// 導入Vue構造函數(shù)
import Vue from 'vue'
import App from './App.vue';
// 導入路由VueRouter構造函數(shù)
import VueRouter from 'vue-router';
 
import Details from "../components/Details.vue";
import HellWold from "../components/HelloWorld.vue";
import Find from "../components/Find.vue";
import My from "../components/My.vue";
import Part from "../components/Part.vue";
import NotFound from "../components/NotFound.vue";
 
import Recom from "../components/two/Recom.vue";
import Ranking from "../components/two/Ranking.vue";
import SongList from "../components/two/SongList.vue";
 
// 生產(chǎn)提示 
// 改成false是用來關閉開發(fā)者提示
Vue.config.productionTip = false
 
//調用構造函數(shù)Vue的use方法 傳入VueRouter構造函數(shù)
//作用是把VueRouter作為一個插件 全局插入到Vue中
Vue.use(VueRouter)
 
// 創(chuàng)建路由規(guī)則：定義一個路由數(shù)組對象
var routes = [
  /**
   *一個對象就對應了一個路由
   *path 就是路由的地址
   *name 給路由起的名字
   *component 具體跳轉的是哪個組件頁面
   */
  {
    // path: '/' 根頁面，表示已進入就顯示的頁面
    path: "/",
    // 路由重定向：redirect意味著重定向，當瀏覽器訪問'/'根路徑時,將會自動重定向到'/find'
    redirect: "find", //默認顯示推薦組件(路由的重定向)
  },
  {
    path: "/find",
    name: "find",
    component: Find,
    children: [
      {
        // Vue中如何實現(xiàn)路由跳轉時單頁面只含子路由的內(nèi)容？
        // 子路由的組件必定在上一級路由中的 router-view 中顯示，可以通過條件判斷，將父組件的內(nèi)容隱藏，或者導向新的頁面
        path: "/",
        redirect: "recom", //默認顯示推薦組件
      },
      {
        path: "recom",
        component: Recom, 
      },
      {
        path: "ranking", //注意二級路由的路徑千萬不要加斜杠/
        component: Ranking,
      },
      {
        path: "songlist",
        component: SongList,
      },
    ],
  },
  {
    path: "/my",
    name: "my",
    component: My,
  },
  {
    path: "/part",
    name: "part",
    component: Part,
  },
  {
    path: "/helloworld",
    name: "helloworld",
    component: HellWold,
  },
  {
    path: "/details",
    name: "details",
    component: Details,
  },
  {
    // path:'*' 必須要放最后 
    // path:'*' 表示上面的路由沒有匹配到，則進入下面的頁面
    path: "*", //也可以寫為"/*"
    name: "NotFound",
    component: NotFound, //定義找不到已有組件時顯示404
  },
];
 
// 實例化構造函數(shù) VueRouter 產(chǎn)生一個實例化對象
// 并把上面的路由數(shù)組對象routes當作參數(shù)，以對象的方式傳給構造函數(shù) VueRouter
const router = new VueRouter({
  routes, // 引入路由規(guī)則routes
  mode: "history", //路由模式(默認為hash模式)
});
 
 
// 掛載
/**
 * 在Vue的對象參數(shù)里面配置 el:"#app" 等于 .$mount('#app')
 * 都是用來掛載到id為#app的div上的
 * 把路由實例化對象router配置在Vue中，作用是保證項目中
 * 所有的vue文件都可以使用router路由的屬性和方法
 */ 
new Vue({
  router, // 注入路由對象
  // render函數(shù)渲染DOM結構，創(chuàng)建虛擬節(jié)點VNode。會把所有vue文件渲染到App組件上件上
  render: h => h(App),
}).$mount('#app') // 若沒有配置el屬性，就需要使用$mount()函數(shù)手動掛載，等同于el:"#app""#app"

番外：當然，我們也可以在一個單獨的index.js文件里面創(chuàng)建路由字典以及路由器對象并將路由字典傳入路由器對象中中，比如，我們在src文件夾下，新建一個router文件夾，里面存放index.js。然后把index.js文件導入main.js即可。把路由文件項目入口文件main.js分開，是推薦的比較規(guī)范的做法。附：各個頁面文件代碼如下：

注意！在index.js文件中，不要忘記導入與路由字典對應的各個頁面組件以及vue-router ，并且最后要加一句導出路由對象的代碼：export default router

vue腳手架項目結構，如下：

vue版本及安裝各依賴的版本情況，如下：

頁面組件之間的跳轉演示，如下：

路由文件——src/router/index.js

// 導入路由VueRouter構造函數(shù)
// 因為涉及路由規(guī)則以及路由器對象，所以需要引入VueRouter
import VueRouter from "vue-router";
// 以下是各個頁面組件的引入
import Details from "../components/Details.vue";
import HellWold from "../components/HelloWorld.vue";
import Find from "../components/Find.vue";
import My from "../components/My.vue";
import Part from "../components/Part.vue";
import NotFound from "../components/NotFound.vue";
 
// 創(chuàng)建路由規(guī)則：定義一個路由數(shù)組對象
var routes = [
  /**
   *一個對象就對應了一個路由
   *path 就是路由的地址
   *name 給路由起的名字
   *component 具體跳轉的是哪個組件頁面
   */
  {
    // path: '/' 根頁面，表示已進入就顯示的頁面
    path: "/",
    // 路由重定向：redirect意味著重定向，當瀏覽器訪問'/'根路徑時,將會自動重定向到'/find'
    redirect: "find", //默認顯示推薦組件(路由的重定向)
  },
  {
    path: "/find",
    name: "find",
    component: Find,
    children: [
      {
        // Vue中如何實現(xiàn)路由跳轉時單頁面只含子路由的內(nèi)容？
        // 子路由的組件必定在上一級路由中的 router-view 中顯示，可以通過條件判斷，將父組件的內(nèi)容隱藏，或者導向新的頁面
        path: "/",
        redirect: "recom", //默認顯示推薦組件
      },
      {
        path: "recom",
        component: Recom, 
      },
      {
        path: "ranking", //注意二級路由的路徑千萬不要加斜杠/
        component: Ranking,
      },
      {
        path: "songlist",
        component: SongList,
      },
    ],
  },
  {
    path: "/my",
    name: "my",
    component: My,
  },
  {
    path: "/part",
    name: "part",
    component: Part,
  },
  {
    path: "/helloworld",
    name: "helloworld",
    component: HellWold,
  },
  {
    path: "/details",
    name: "details",
    component: Details,
  },
  {
    // path:'*' 必須要放最后 
    // path:'*' 表示上面的路由沒有匹配到，則進入下面的頁面
    path: "*", //也可以寫為"/*"
    name: "NotFound",
    component: NotFound, //定義找不到已有組件時顯示404
  },
];
 
// 創(chuàng)建路由器對象
// 實例化構造函數(shù) VueRouter 產(chǎn)生一個實例化對象
// 并把上面的路由數(shù)組對象routes當作參數(shù)，以對象的方式傳給構造函數(shù) VueRouter
const router = new VueRouter({
  routes,
  mode: "history", //路由模式(默認為hash模式)
});
 
// 導出路由器對象
// 把實例化路由對象 router 默認導出
export default router;

項目入口文件——src/main.js

// 導入vue構造函數(shù)
import Vue from 'vue'
// 導入根組件——項目主組件，頁面入口文件，vue頁面資源的首加載項
import App from './App.vue';
// 導入路由VueRouter構造函數(shù)
// 需要注冊全局VueRouter，所以引入VueRouter
import VueRouter from 'vue-router';
// 導入路由文件
//導入router文件夾中的index.js中的router實例化對象 
//一個文件夾里面只有一個index.js文件在腳手架中可以把./router/index.js簡寫為./router
import router from './router'
 
// 生產(chǎn)提示 
// 改成false是用來關閉開發(fā)者提示
Vue.config.productionTip = false
 
// 注冊全局VueRouter
// 調用構造函數(shù)Vue的use方法 傳入VueRouter構造函數(shù)
// 作用是把VueRouter作為一個插件 全局插入到Vue中
Vue.use(VueRouter)
 
// 掛載div#app
/**
 * 在Vue的對象參數(shù)里面配置 el:"#app" 等于 .$mount('#app')
 * 都是用來掛載到id為#app的div上的
 * 把路由實例化對象router配置在Vue中，作用是保證項目中
 * 所有的vue文件都可以使用router路由的屬性和方法
 */ 
new Vue({
  router, // 注入路由對象
  // render函數(shù)渲染DOM結構，創(chuàng)建虛擬節(jié)點VNode。會把所有vue文件渲染到App組件上
  render: h => h(App), 
}).$mount('#app')  // 若沒有配置el屬性，就需要使用$mount()函數(shù)手動掛載，等同于el:"#app"

項目根組件——src/App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <HellWold></HellWold>
    <hr>
    <div id="nav">
      <!--使用 router-link 組件進行導航 -->
      <!--通過傳遞 `to` 來指定鏈接 -->
      <!--`<router-link>` 將呈現(xiàn)一個帶有正確 `href` 屬性的 `<a>` 標簽-->
      <router-link to="/find">發(fā)現(xiàn)音樂</router-link>
      <router-link to="/my">我的音樂</router-link>
      <router-link to="/part">我的朋友</router-link>
    </div>
    <hr>
    <!-- 路由出口 -->
    <!-- 路由匹配到的組件將渲染在這里 -->
    <router-view></router-view>
  </div>
</template>
 
<script>
import HellWold from "./components/HelloWorld.vue";
export default {
  name: "App",
  components: {
    HellWold,
  },
};
</script>
 
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
#nav {
  display: flex;
  justify-content: space-around;
}
a { 
  text-decoration: none; 
}
</style>

頁面組件——Find.vue

<template>
  <div class="find">我是發(fā)現(xiàn)頁
    <!-- 用于展示二級路由默認路由Recom -->
    <!-- 進入根路徑，自動重定向到Find組件頁面，然后有重定向到二級默認路由組件Recom -->
    <router-view></router-view>
  </div>
</template>
 
<script>
export default{
  name:"Find"
};
</script>
 
<style scoped>
.find{
  color: blue;
  font: italic 700 25px Arial;
}
</style>

頁面組件Find的二級默認組件——Recom.vue

<template>
  <div class="recom">
    <router-link to="/details">recom...</router-link>
  </div>
</template>
 
<script>
export default {
  name: "Recom",
};
</script>
 
<style scoped>
</style>

頁面組件Find的二級組件——Ranking.vue

<template>
  <div class="ranking">
    <router-link to="/details">ranking...</router-link>
  </div>
</template>
 
<script>
export default {
  name: "Ranking",
};
</script>
 
<style scoped></style>

頁面組件Find的二級組件——SongList.vue

<template>
  <div class="songList">
    <router-link to="/details">songlist...</router-link>
  </div>
</template>
 
<script>
export default {
  name: "SongList",
};
</script>
 
<style scoped>
</style>

頁面組件——Details.vue

<template>
  <div class="details">我是詳情頁</div>
</template>
 
<script>
export default {
  name: "Details",
};
</script>
<style scoped>
.details {
  color: rgb(20, 220, 40);
  font: italic 700 25px Arial;
}
</style>

頁面組件——My.vue

<template>
  <div class="my">我是音樂頁
 
  </div>
</template>
 
<script>
export default{
  name:"My"
};
</script>
<style scoped>
.my{
  color:rgb(20, 159, 113);
  font: italic 700 25px Arial;
}
</style>

頁面組件——Part.vue

<template>
  <div class="part">我是朋友頁
  </div>
</template>
 
<script>
export default{
  name:"part"
 
};
</script>
 
<style scoped>
.part{
  color: crimson;
  font: italic 700 25px Arial;
}
</style>

頁面組件——HelloWorld.vue

<template>
  <div class="hello">如果我被App.vue導入，那么我就是App.vue的子組件</div>
</template>
<script>
 
export default {
  name: "HelloWorld",
  created() {},
};
</script>
 
<style scoped>
.hello{
  color:cornflowerblue;
  font: 700 25px Arial;
}
</style>

頁面組件——NotPage.vue

<template>
  <div class="NotFound">我是404頁</div>
</template>
 
<script>
export default {
  name: "NotFound",
};
</script>
 
<style scoped>
.NotFound{
  color: crimson;
  font: normal 900 40px Arial;
}
</style>

二、實現(xiàn)路由跳轉2種方式：聲明式導航和編程式導航

Vue Router | Vue.js 的官方路由

?? 聲明式導航

在瀏覽器中，點擊鏈接實現(xiàn)導航的方式，叫做聲明式導航。例如：普通網(wǎng)頁中點擊 a標簽鏈接。vue項目中點擊router-link標簽鏈接都屬于聲明式導航。
聲明式路由導航，直接寫在html中，結構簡單使用方便，但是只能放在<router-link>標簽中使用，<router-link>標簽會將路由轉成<a>標簽，通過點擊跳轉路由，因此局限性也非常大。

?? 編程式導航

在瀏覽器中，調用API方法實現(xiàn)導航的方式，叫做編程式導航。例如：普通網(wǎng)頁中調用location.href跳轉到新頁面的方式，屬于編程式導航。vue項目中編程式導航有this.$router.push()，this.$router.replace()，this.$router.go()。參考資料：Vue路由跳轉方式

編程式路由導航，需要寫在js中，結構也不算復雜，優(yōu)勢在于非常靈活，不受固定標簽限制，可以在任意情景下轉跳路由。

實際應用時可根據(jù)自身喜好決定使用哪種路由導航方式。

1、聲明式導航—router-link

router-link —聲明式路由，在頁面中調用—實現(xiàn)跳轉最簡單的方法

利用組件router-link創(chuàng)建a標簽來定義導航鏈接，它是用來替代a標簽的；

? router-link 是vue-router提供的一個全局組件；

? router-link實質上最終會渲染成a鏈接，to屬性指定目標地址等價于href屬性；

? router-link提供了聲明式導航高亮的功能(自帶類名)；

1) 不帶參數(shù)

// 注意：router-link中鏈接如果是'/'開始就是從根路由開始，如果開始不帶'/'，則從當前路由開始。
// 1. 字符串屬性 to ————經(jīng)測試，以下2種寫法都是可以的
<router-link to='/find'> // 字符串
<router-link to='find'> // 字符串
// 2. 動態(tài)屬性綁定 :to或v-bind:to ————————經(jīng)測試，以下4種寫法都是可以的
// :to="變量或js表達式"
<router-link :to="'find'">  // 不要忘記加引號，字符串也是一個js表達式
// 對象格式，name,path都行, 建議用name  
<router-link :to="{name:'find'}">  
<router-link :to="{path:'find'}">  
<router-link :to="{path:'/find'}"> 
 
// 經(jīng)測試：有component參數(shù)時優(yōu)先router-link中配置的component，沒有時從js中配置取
<router-link :to="{path:'/find',component: Find}">

舉個栗子：

在控制臺開發(fā)者工具里檢查元素時會發(fā)現(xiàn)激活的類名，在樣式style中有定義高亮樣式，點擊時就會實現(xiàn)高亮效果

<template>
  <div>
    <div class="footer_wrap">
      // router-link好處 : 自帶激活時的類名, 可以做高亮
      <router-link to="/find">發(fā)現(xiàn)音樂</router-link>
      <router-link to="my">我的音樂</router-link>
      <router-link :to="'part'">我的朋友</router-link>
    </div>
    <div class="top">
      <router-view></router-view>
    </div>
  </div>
</template>

<router-link>組件支持用戶在具有路由功能的應用中點擊導航。通過to屬性指定目標地址，默認渲染為帶有正確連接的<a>標簽，可以通過配置tag屬性生成別的標簽。另外，當目標路由成功激活時，鏈接元素自動設置一個表示激活的css類名。

組件的屬性有：

to 、replace、 append、 tag、 active-class、 exact 、 event、 exact-active-class

<router-view> 是與router-link配合，用來渲染通過路由router-link映射過來的組件，當路徑更改時，<router-view> 中的內(nèi)容也會發(fā)生更改。

2) 攜帶參數(shù)

在跳轉路由時, 可以給路由對應的組件內(nèi)傳值 ——動態(tài)路由傳參

在router-link上的to屬性傳參數(shù)值，有以下3種方式 :

方式一：路由屬性配置傳參，需進行組件的路由規(guī)則配置

開啟 props=true 傳值

(1). 修改路由文件index.js中路由字典中的路由地址，允許傳參

{path:"/details/:變量名", component:Details, props:true},

(2) 跳轉時，路徑: /details/變量值

<router-link to="/相對路徑/參數(shù)值" // 需要動態(tài)獲取參數(shù)值時，使用:to

(3). 下個頁面中如何獲得地址欄中的參數(shù)值:

a. 路由文件index.js中的props:true，意為讓地址欄中的參數(shù)值自動變成當前頁面組件的props中的一個屬性值

在 Details.vue 組件中通過 props 接收

export default {       
   name:"details",       
   props:['id'] //模板中便可以使用 {{id}}     
}

b. 下一個頁面中就可以用: props:[ "變量名" ]

(4). 坑: 一旦一個路徑配置/:變量名，則必須攜帶參數(shù)才能進入該路徑。如果不帶參數(shù)，將被禁止進入！

方式二：query方式傳參，可以由name和path引入，無需配置組件的路由規(guī)則

配置路由格式：/path，也就是普通配置。

傳遞的方式：對象中使用query的key作為傳遞方式。

傳遞后形成的路徑：/path?參數(shù)名=參數(shù)值。

// query傳參數(shù) ————類似get，瀏覽器地址欄中顯示參數(shù)
<router-link to="/find?id=1"> // 路由可不配置
<router-link :to="{name:'find', query: {id:1}}"> // 路由可不配置 
<router-link :to="{path:'/find', query: {id:1}}"> // 路由可不配置 
// html 取參  $route.query.id
// script 取參  this.$route.query.id

新頁面參數(shù)獲取：通過$route.query.參數(shù)名 獲取傳遞的值

使用用 query 來傳參，這種方式是可以解決頁面刷新參數(shù)消失問題的，query這種方式可以理解為是 ajax 中的 get 方法，參數(shù)是直接在 url 后面添加的，參數(shù)是可見的，所以解決頁面刷新參數(shù)消失問題建議使用此方法來解決

方式三：params方式傳參，只能由name引入，需進行組件的路由規(guī)則配置

配置路由格式：/path/:參數(shù)變量
傳遞的方式：在path后面跟上對應的值
傳遞后形成的路徑：/path/參數(shù)值

// params傳參數(shù)————類似post，瀏覽器地址欄中不顯示參數(shù)
<router-link to="/find/1">  // 字符串格式傳參
<router-link :to="{name:'find', params: {id:1}}">  // 只能用name
// 路由配置 path: "/find/:id" 或者 path: "/find:id" 
// 不配置path ,第一次可請求,刷新頁面id會消失
// 配置path,刷新頁面id會保留
// html 取參 $route.params.id
// script 取參 this.$route.params.id

新頁面參數(shù)獲取：通過 $route.params.參數(shù)名獲取傳遞的值。

番外：vue-router中route-link的樣式

<router-link>是 vue-router 中的一個組件，在vue2.0中，替代了原來的v-link指令，它的作用就是相當于 a 標簽一樣的給路由做導航，事實上它也確實是默認被渲染為 a 標簽。關于它的詳細信息請看官方文檔：API 參考 | Vue Router

<router-link>這個組件接受以下屬性參數(shù)，在這里我們說一說在使用中要注意的一些問題：

1. replace

添加這個屬性的路由在導航后不會留下 history 記錄，目測這是一個非常好用的屬性，可以解決以前煩死人的 history 問題，大幅提高用戶體驗。

2. tag

route-link 會被默認渲染為 a 標簽，如果你想讓它渲染成其它的標簽就可以使用 tag 屬性，這樣可以解決一些 a 標簽的默認樣式問題。

3. exact

設置了這個屬性的路由會被認為是處于激活狀態(tài)，最典型的應用就是導航欄了，比如說一組5個 tab，給第一個 tab 設置這個屬性，那么它就是處于選中狀態(tài)。

4. active-class

鏈接激活時的類名，其實這個也是為了方便導航欄切換狀態(tài)的，設置這個屬性就可以讓鏈接在激活時自動切換相應的樣式。

5. router-link-active

這是一個類名，也是上面第四條屬性的默認值，就是說鏈接在被激活時會自動給加上這個 class，所以就可以把這個 class 寫在 style 里面，里面寫上導航在激活時的一些公共樣式，比如字體顏色，大小等。參考資料：vue.js學習之router-link

2、編程式導航

$router.push() ——函數(shù)里面調用：用JS代碼來進行跳轉

跳轉到指定url路徑，并想history棧中添加一個記錄，點擊后退會返回到上一個頁面

1) 不帶參數(shù)

// 字符串格式
this.$router.push('/find')
this.$router.push('find')
// 對象格式
this.$router.push({name:'find'}) // name屬性不能斜杠/，因為它只是表示一個名字
// path屬性斜杠/可帶可不帶
this.$router.push({path:'/find'})
this.$router.push({path:'find'})

2) 攜帶參數(shù)

方式一：路由屬性配置傳參，需進行組件的路由規(guī)則配置

(1). 修改路由文件index.js中路由字典中的路由地址，允許傳參

{path:"/details/:變量名", component:Details, props:true},

(2) 跳轉時，路徑: /details/變量值

this.$router.push("/相對路徑/參數(shù)值")

(3). 下個頁面中如何獲得地址欄中的參數(shù)值:

a. 路由文件index.js中的props:true，意為讓地址欄中的參數(shù)值自動變成當前頁面組件的props中的一個屬性值

b. 下一個頁面中就可以用: props:[ "變量名" ]

(4). 坑: 一旦一個路徑配置/:變量名，則必須攜帶參數(shù)才能進入該路徑。如果不帶參數(shù)，將被禁止進入！

方式二：query方式傳參，可以由name和path引入，無需配置組件的路由規(guī)則

配置路由格式：/path，也就是普通配置。

傳遞的方式：對象中使用query的key作為傳遞方式。

傳遞后形成的路徑：/path?參數(shù)名=參數(shù)值。

// query傳參數(shù) ————類似get，瀏覽器地址欄中顯示參數(shù)
this.$router.push({name:'find',query: {id:'1'}}) // 不用路由配置
this.$router.push({path:'/find',query: {id:'1'}})// 不用路由配置
// html 取參 $route.query.id
// script 取參 this.$route.query.id

新頁面參數(shù)獲取：通過$route.query.參數(shù)名 獲取傳遞的值

方式三：params傳參，只能由name引入，需進行組件的路由規(guī)則配置

配置路由格式：/path/:參數(shù)變量
傳遞的方式：在path后面跟上對應的值
傳遞后形成的路徑：/path/參數(shù)值

// params傳參數(shù)————類似post，瀏覽器地址欄中不顯示參數(shù)
this.$router.push({name:'find',params: {id:'1'}}) // 只能用 name  
// 路由配置 path: "/find/:id" 或者 path: "/find:id" ,
// 不配置path ,第一次可請求,刷新頁面id會消失
// 配置path,刷新頁面id會保留
// html 取參 $route.params.id
// script 取參 this.$route.params.id

params傳參時，如果沒有在路由規(guī)則中定義參數(shù)，也是可以傳過去的，同時也能接收到，但是一旦刷新頁面，這個參數(shù)就不存在了

新頁面參數(shù)獲取：通過 $route.params.參數(shù)名獲取傳遞的值。

$router.replace()——用法同$router.push(）

1) 跳轉到指定的URL，替換history棧中最后一個記錄，點擊后退會返回至上一個頁面。（A----->B----->C 結果B被C替換 A----->C）

2) 設置replace屬性（默認值：false）的話，當點擊時，會調用router.replace()，而不是router.push()，于是導航后不會留下history記錄。

3) 即使點擊返回按鈕也不會回到這個頁面。加上replace: true時，它不會向 history 添加新紀錄，而是跟它的方法名一樣——替換當前的history記錄。

// 聲明式
<reouter-link :to="..." replace></router-link>
// 編程式：
router.replace(...)
 
// push方法也可以傳replace
this.$router.push({path: '/homo', replace: true})
 
this.$router.replace({
    name: this.pageFrom,
    params: this.formData
})
 
onConfirm: () => {
  this.$router.replace('/TravelManage')
}

this.$router.go(n)

向前或者向后跳轉n個頁面，n可為正整數(shù)或負整數(shù)

該方法的參數(shù)n是一個整數(shù)，意思是在 history 記錄中向前或者后退多少步，類似 window.history.go(n)

this.$router.go(1) // 類似history.forward()
this.$router.go(-1) // 類似history.back()

編程式導航3種方式的區(qū)別

this.$router.push

跳轉到指定url路徑，并向history棧中添加一個記錄，點擊后退會返回到上一個頁面

this.$router.replace

跳轉到指定url路徑，但是history棧中不會有記錄，點擊返回會跳轉到上上個頁面 (就是直接替換了當前頁面)

this.$router.go(n)

向前或者向后跳轉n個頁面，n可為正整數(shù)或負整數(shù)

三、query和params區(qū)別

用法上的區(qū)別：

query傳參方式可以配合path或是name來引入路由，而params只能用name來引入（如果使用path，接收參數(shù)頁面會是undefined?。。。?，接收參數(shù)都是類似的，分別是 this.$route.query.參數(shù)名和 this.$route.params.參數(shù)名。

用 path 的時候，提供的 path 值必須是相對于根路徑的相對路徑，而不是相對于父路由的相對路徑，否則無法成功訪問。

url地址顯示與否：

query更加類似于我們ajax中的get傳參，頁面跳轉之后頁面 url后面會拼接參數(shù)，類似?id=1，刷新頁面后參數(shù)id還在，會一直保留，也就是說，query傳參刷新頁面后可以保存。另外，非重要性的可以這樣傳，密碼之類等重要數(shù)據(jù)還是要使用params，這樣數(shù)據(jù)安全。

query傳參，比較靈活，沒有條件約束隨時可以追加參數(shù)，參數(shù)顯示在了參數(shù)（search）的位置，參數(shù)的辨識度更高，例如：/name，/name?username=tom。

params類似post，跳轉之后頁面 url后面不會拼接參數(shù)，也就是說地址欄不顯示參數(shù)名稱id，但是有參數(shù)的值，如果刷新頁面后id會消失，也就是說，params傳參刷新后不會保存（除非在路由規(guī)則里配置對應參數(shù)：/path/:參數(shù)變量）

params傳參，正確使用時相對嚴謹，對于沒有在動態(tài)路由上定義的參數(shù)如果隨意增刪，會有數(shù)據(jù)丟失的風險。定義路由時就要考慮好路由參數(shù)定義。參數(shù)如果為字符串時，辨識度會低于query的方式，例如：/name/:username，/name/tom。

需要特別注意的點

1. params是路由的一部分，必須要在路由后面添加參數(shù)名，也就是占位符。

2. query是拼接在url后面的參數(shù)，沒有也沒關系。

3. params一旦設置在路由，params就是路由的一部分，如果這個路由有params傳參，但是在跳轉的時候沒有傳這個參數(shù)，會導致跳轉失敗或者頁面會沒有內(nèi)容。

小結：

query傳參：

直白的來說query相當于get請求，name和path都行，通過this.$route.query獲取，頁面跳轉的時候，可以在地址欄看到請求的參數(shù)名以及參數(shù)值，刷新頁面，參數(shù)會一直保留。

params傳參：

params相當于post請求，只能name，通過this.$route.params獲取，頁面跳轉的時候，參數(shù)名不會在地址欄中顯示，但是參數(shù)值會顯示，刷新頁面參數(shù)值丟失。（如果想要參數(shù)值即使刷新也會一直保留顯示在地址欄里，必須在路由字典中對應的路由里使用冒號" : "來匹配對應參數(shù)，否則第一次可請求，雖然可以傳參，但刷新頁面參數(shù)值會消失）。

params傳參不適于需要刷新頁面，又要取值的情形。因此，解決頁面刷新導致數(shù)據(jù)丟失的問題，建議使用 query傳參，除此之外，也可以考慮使用 localStorage，sessionStorage來保存參數(shù)，也可以使用vuex的store來保存。

番外：帶參數(shù)的動態(tài)路由匹配

動態(tài)路徑參數(shù)，使用冒號 : 標記。比如，當一個路由被匹配時，它的 params 的值將在每個組件中以 this.$route.params 的形式暴露出來，你可以在同一個路由中設置有多個路徑參數(shù)，它們會映射到 $route.params 上的相應字段。例如：

匹配模式	匹配路徑	$route.params
/users/:username	/users/eduardo	`{ username: 'eduardo' }`
/users/:username/posts/:postId	/users/eduardo/posts/123	`{ username: 'eduardo', postId: '123' }`

除了 $route.params 之外，$route 對象還公開了其他有用的信息，如 $route.query（如果 URL 中存在參數(shù)）、$route.hash 等。你可以在 API 參考中查看完整的細節(jié)。這個例子的 demo 可以在這里找到。

動態(tài)路由很適合用于類似商品詳情頁的需求，商品詳情頁的頁面結構都一樣，只是商品id的不同，然而id不同，詳情頁渲染出的結果不一樣，所以這個時候就可以用動態(tài)路由。

vue官方參考資料：帶參數(shù)的動態(tài)路由匹配 | Vue Router

四、router、routes、route的區(qū)別

1. router：指的是路由實例。如：路由編程式導航的this.$ router.push( )也能進行跳轉，這個方法則會向history里面添加一條記錄，當點擊瀏覽器回退按鈕或者this.$ router.back()就會回退之前的url。而this.$router.back(-1)就是返回上一個路由。

2. routes：指創(chuàng)建路由實例的配置項。用來配置多個route路由對象。routes出現(xiàn)在router文件夾下的index.js文件里，如下圖：

就是我們在routes里進行路由配置，我們發(fā)現(xiàn)routes里對象里的component屬性值既可以寫成組件名，也可以直接( )=>import(路徑)寫入，這兩種寫法都是可以的，只不過后一種方法就不用再在上面單獨import…from…引入了。一般是在懶加載時采用該方式，也就是說暫時不要把該組件import進程序中，在路由字典routes中定義，只有當用戶訪問到某個組件時，才動態(tài)引入這個組件。

3. route：路由對象。如：this.$route指的就是當前路由對象，可以從對象里面獲取name，path，params，query，hash等。

小結：route, routes, router

?1. router: 用new VueRouter()創(chuàng)建出的路由器對象

a. 監(jiān)視地址欄變化；b. 還可以執(zhí)行跳轉動作！
$router 是“路由實例”對象包括了路由的跳轉方法，鉤子函數(shù)等。——如$router.push( )

2. routes: 一個路由字典數(shù)組，包含當前網(wǎng)站中所有路徑與組件的對應關系列表。

routes會被裝入new VueRouter()即路由器對象router中，和router對象一起發(fā)揮作用！

3. route: 一個路由地址，代表當前地址欄中的url信息，像BOM中的location。如地址欄：http://127.0.0.1:5500/index.html#/details ?

$route 是“路由信息對象”，包括 path，params，hash，query，fullPath，matched，name 等路由信息參數(shù) ——如$route. Params. Userid 獲取參數(shù)傳遞的值

番外：Vue-router跳轉和location.href有什么區(qū)別

使用 location.href= /url 來跳轉，簡單方便，但是刷新了頁面；

使用 history.pushState( /url ) ，無刷新頁面，靜態(tài)跳轉；

引進 router ，然后使用 router.push( /url )來跳轉，使用了diff 算法，實現(xiàn)了按需加載，減少了 dom 的消耗。其實使用 router 跳轉和使用 history.pushState() 沒什么差別的，因為vue-router就是用了 history.pushState() ，尤其是在history模式下

番外：vue項目中跳轉到外部鏈接方法

在項目文件中，如果是vue頁面中的內(nèi)部跳轉，在js中用this.$router.push(“/相對地址”)或是this.$router.resolve(“/相對地址”)可以實現(xiàn)

例如：

this.$router.push({path:'/channeldetailview',query: {channelid:this.data.id}});

或是在html中使用

<router-link to="/相對地址">內(nèi)容</router-link>

在vue中使用this.$router.push(“/相對地址”) 或 this.$router.resolve(“/相對地址”)，都可實現(xiàn)跳轉新頁面，那vue中這兩種打開新頁面的方式之間有什么區(qū)別呢？

實際上，這兩種方式的區(qū)別如下：

$router.push()方法是一個可以直接實現(xiàn)鏈接跳轉的方法，即在vue中它可以直接在當前頁面打開新的路由(僅能在當前頁面打開)并加載組件。返回一個Promise對象

$router.resolve()方法本身不能直接實現(xiàn)鏈接跳轉，需要借助直接window全局對象中的打開鏈接的方法，例如open()方法才能實現(xiàn)，然后根據(jù)open方法的name屬性的屬性值_self或是_blank來選擇是當前頁面打開鏈接并加載組件還是打開新的標簽頁并加載組件。返回的對象，如下圖：

舉個梨子：this.$router.resolve() 打開新窗口跳轉

通過path形式跳轉

goTo() {    

    let routeData = this.$router.resolve({  path: "/details",  });    

    window.open(routeData.href, "_blank");  

}

? 通過name形式跳轉

goTo() {    

    let routeData = this.$router.resolve({  name: "details",  });    

    window.open(routeData.href, "_blank");  

}

<template>
  <div class="recom">
    <router-link to="/details">recom...</router-link>
    <button @click="goTo">我是一個按鈕</button>
  </div>
</template>
 
<script>
export default {
  name: "Recom",
  methods: {
    goTo() {
      // 1、$router.push()可直接實現(xiàn)從當前頁面打開鏈接，不能實現(xiàn)新標簽頁面打開鏈接
      // this.$router.push({ path: "/details"})
 
      // 2.$router.resolve()配合window全局對象中的打開鏈接的方法，實現(xiàn)鏈接跳轉
      let routeData = this.$router.resolve({
        path: "/details"
        // name: "details"
      });
      console.log(routeData)
      window.open(routeData.href, "_blank");
    },
  },
};
</script>
 
<style scoped>
</style>

跳到外部鏈接，不能用這個。不然就會報錯，看一下鏈接的路徑，原來外部鏈接前面加上了http://localhost:8080/#/這一串導致跳轉出現(xiàn)問題，那么我們?nèi)绾翁D到外部鏈接呢？

① 我們只需用 window.location.href = url 來實現(xiàn)——直接在方法里面寫

window.location.

② 綁定事件處理函數(shù)

view界面中

<button @click="search">我的個人主頁</button>

methods對象中

methods: {     
   search() { 
     window.location.  
   }
}

在當前窗口打開新連接

可后退：以下3個方法等價
① window.location.assign("新url") ；② window.location.href="新url"；③ window.open("url", "_self"

禁止后退：

js: location.replace("新url")

在新窗口打開，可打開多個:
window.open("url", "_blank")；

在新窗口打開，只能打開一個:
window.open("url", "自定義的窗口名");

以上就是Vue中實現(xiàn)路由跳轉傳參的4種方式的詳細內(nèi)容，更多關于Vue路由跳轉傳參的資料請關注腳本之家其它相關文章！

您可能感興趣的文章:

element基于el-form智能的FormSmart表單組件
本文主要介紹了element基于el-form智能的FormSmart表單組件，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-04-04
vue-router實現(xiàn)簡單vue多頁切換、嵌套路由、路由跳轉的步驟和報錯
最近學習到VUE路由這塊,發(fā)現(xiàn)這塊知識點有點多,好容易混亂,這篇文章主要介紹了vue-router實現(xiàn)簡單vue多頁切換、嵌套路由、路由跳轉的步驟和報錯的相關資料,需要的朋友可以參考下
2024-05-05
利用vue控制元素的顯示與隱藏
大家都知道在vue中我們可以使用v-if或者v-show去做隱藏顯示,下面這篇文章主要給大家介紹了關于如何利用vue控制元素的顯示與隱藏的相關資料,需要的朋友可以參考下
2022-12-12
Vue動態(tài)引用json數(shù)據(jù)的兩種方式
在 Vue 項目中引用 JSON 文件非常簡單,尤其是當文件內(nèi)容是一個數(shù)組時,本文給大家介紹了Vue動態(tài)引用json數(shù)據(jù)的兩種方式,并有相關的代碼示例供大家參考,需要的朋友可以參考下
2025-04-04
Vue snippets插件原理與使用介紹
這篇文章主要介紹了Vue snippets插件原理與使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧
2022-10-10
Vue祖孫組件如何實現(xiàn)傳值
這篇文章主要介紹了Vue祖孫組件如何實現(xiàn)傳值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-03-03
Vue3中如何檢測數(shù)組的變化方式
這篇文章主要介紹了Vue3中如何檢測數(shù)組的變化方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-06-06
解決vue的router組件component在import時不能使用變量問題
這篇文章主要介紹了解決vue的router組件component在import時不能使用變量問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
Vue報錯ERR_OSSL_EVP_UNSUPPORTED解決方法
Vue項目啟動時報錯ERR_OSSL_EVP_UNSUPPORTED,本文主要介紹了Vue報錯ERR_OSSL_EVP_UNSUPPORTED解決方法,具有一定的參考價值,感興趣的可以了解一下
2024-08-08
Vue?Echarts實現(xiàn)多功能圖表繪制的示例詳解
作為前端人員，日常圖表、報表、地圖的接觸可謂相當頻繁，今天小編隆重退出前端框架之VUE結合百度echart實現(xiàn)中國地圖+各種圖表的展示與使用；作為“你值得擁有”專欄階段性末篇，值得一看
2023-02-02