（超詳細(xì)）vue怎么進(jìn)行路由跳轉(zhuǎn)？三種方式分享

vue怎么進(jìn)行路由跳轉(zhuǎn)？本篇文章給大家詳細(xì)整理vue中實(shí)現(xiàn)路由跳轉(zhuǎn)的三種方式，希望對(duì)大家有所幫助！

前端（vue）入門(mén)到精通課程，老師在線輔導(dǎo)：聯(lián)系老師
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調(diào)試工具：點(diǎn)擊使用

一、使用vue-router

vue-router 本質(zhì)是一個(gè)第三方的包 用的時(shí)候需要下載?！緦W(xué)習(xí)視頻分享：vue視頻教程、web前端視頻】

步驟 （7步法 ）：

1、下載vue-router模塊到當(dāng)前工程

 yarn add vue-router

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

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

3、添加到Vue.use()身上 – 注冊(cè)全局RouterLink和RouterView組件

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

4、創(chuàng)建路由規(guī)則數(shù)組 – 路徑和組件名對(duì)應(yīng)關(guān)系

創(chuàng)建路由規(guī)則數(shù)組（需要準(zhǔn)備切換的頁(yè)面組件）把準(zhǔn)備好的頁(yè)面組件引入到main.js中

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

5、用規(guī)則生成路由對(duì)象

    // 創(chuàng)建路由對(duì)象并且傳入規(guī)則 const router = new VueRouter({     routes,     mode: "history" //路由模式(默認(rèn)為hash模式) })

6、把路由對(duì)象注入到new Vue實(shí)例中

new Vue({     router, //導(dǎo)入路由對(duì)象     render: h => h(App), }).$mount('#app')

7、用router-view作為掛載點(diǎn), 切換不同的路由頁(yè)面

當(dāng)url的hash值路徑切換，顯示規(guī)則里對(duì)應(yīng)的組件

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

注意:一切都要以u(píng)rl上hash值為準(zhǔn)

二、聲明式-router-link 【實(shí)現(xiàn)跳轉(zhuǎn)最簡(jiǎn)單的方法】

1.可用組件router-link來(lái)替代a標(biāo)簽

• router-link 是vue-router提供了一個(gè)全局組件
• router-link實(shí)質(zhì)上最終會(huì)渲染成a鏈接 to屬性等價(jià)于提供 href屬性(to無(wú)需#)
• router-link提供了聲明式導(dǎo)航高亮的功能(自帶類(lèi)名)

代碼如下：

<template>   <div>     <div class="footer_wrap">       <router-link to="/find">發(fā)現(xiàn)音樂(lè)</router-link>       <router-link to="/my">我的音樂(lè)</router-link>       <router-link to="/part">朋友</router-link>     </div>     <div class="top">       <router-view></router-view>     </div>   </div> </template> //在控制臺(tái)元素檢查時(shí)會(huì)發(fā)現(xiàn)激活的類(lèi)名 在樣式style中定義高亮樣式 點(diǎn)擊時(shí)就會(huì)高亮

router-link好處 : 自帶激活時(shí)的類(lèi)名, 可以做高亮

2.在跳轉(zhuǎn)路由時(shí), 可以給路由對(duì)應(yīng)的組件內(nèi)傳值

在router-link上的to屬性傳值, 語(yǔ)法格式如下 :

(方式一)

to=/path?參數(shù)名=值

例：to="/part?name=小明"

對(duì)應(yīng)頁(yè)面組件接收傳遞過(guò)來(lái)的值

$route.query.參數(shù)名

接收數(shù)據(jù)：$route.query.name

(方式二)

to=“/path/值” (需在路由規(guī)則里配置/path/:參數(shù)名)

例：to="/part/小王"

配置：path:"/part/:username"

對(duì)應(yīng)頁(yè)面組件接收傳遞過(guò)來(lái)的值 （注意動(dòng)態(tài)參數(shù)需要用params接收）

$route.params.參數(shù)名

接收數(shù)據(jù)：$route.params.username

三、編程式-用JS代碼來(lái)進(jìn)行跳轉(zhuǎn)

用JS代碼來(lái)進(jìn)行跳轉(zhuǎn)

語(yǔ)法: path或者name任選一個(gè)

1、$ router 和 $ route的區(qū)別

$router : 是路由操作對(duì)象，只寫(xiě)對(duì)象

$route : 路由信息對(duì)象，只讀對(duì)象

$ router操作路由跳轉(zhuǎn)

this.$router.push({ name:‘hello’, query:{ name:‘word’, age:‘11’ } })

$route讀取 路由參數(shù)接收

var name = this.$route.query.name;

2、路由跳轉(zhuǎn)方式name 、 path 和傳參方式params 、query的區(qū)別（重要）

path 和 name路由跳轉(zhuǎn)方式，都可以用query傳參

• 使用path方式跳轉(zhuǎn)路由 path會(huì)忽略params 所以path不能和params一起使用
• 推薦使用name和query方式實(shí)現(xiàn)路由跳轉(zhuǎn)

params傳參，push里面只能是 name:‘xxx’,不能是path:‘/xxx’,因?yàn)閜arams只能用name來(lái)引入路由，如果這里寫(xiě)成了path，接收參數(shù)頁(yè)面會(huì)是undefined?。?！

通過(guò)params傳參

==注意：==這里使用name路由跳轉(zhuǎn)方式路徑不需要加 / 因?yàn)樗皇莻€(gè)名字

this.$router.push({     name:"Home",     params:{         id:this.id     } })

登錄后復(fù)制

另一個(gè)頁(yè)面接收:

這里使用params傳參就需要寫(xiě)params接收

this.$route.params.id

登錄后復(fù)制

通過(guò)query傳參

this.$router.push({     path:"/Search",     query:{ //query是個(gè)配置項(xiàng)         age:20     } })

登錄后復(fù)制

登錄后復(fù)制

另一個(gè)頁(yè)面接收

this.$route.query.age

登錄后復(fù)制

登錄后復(fù)制

query相當(dāng)于GET請(qǐng)求，頁(yè)面跳轉(zhuǎn)的時(shí)候，可以在地址欄看到請(qǐng)求參數(shù)

uery傳參**

this.$router.push({     path:"/Search",     query:{ //query是個(gè)配置項(xiàng)         age:20     } })

登錄后復(fù)制

登錄后復(fù)制

另一個(gè)頁(yè)面接收

this.$route.query.age

登錄后復(fù)制

登錄后復(fù)制

總結(jié)：
query相當(dāng)于GET請(qǐng)求，頁(yè)面跳轉(zhuǎn)的時(shí)候，可以在地址欄看到請(qǐng)求參數(shù)

params相當(dāng)于POST請(qǐng)求，參數(shù)不會(huì)在地址欄中顯示

（學(xué)習(xí)視頻分享：web前端開(kāi)發(fā)、編程基礎(chǔ)視頻）