Vue中實現(xiàn)路由跳轉(zhuǎn)的三種方式(超詳細整理)
vue中實現(xiàn)路由跳轉(zhuǎn)的三種方式
一、使用vue-router
vue-router 本質(zhì)是一個第三方的包 用的時候需要下載
步驟 （7步法 ）：
1.下載vue-router模塊到當前工程
yarn add vue-router
2.在main.js中引入VueRouter函數(shù)
// 引入路由 import VueRouter from "vue-router";
3.添加到Vue.use()身上 – 注冊全局RouterLink和RouterView組件
// 注冊全局 Vue.use(VueRouter)
4.創(chuàng)建路由規(guī)則數(shù)組 – 路徑和組件名對應關系
創(chuàng)建路由規(guī)則數(shù)組（需要準備切換的頁面組件）把準備好的頁面組件引入到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.用規(guī)則生成路由對象
// 創(chuàng)建路由對象并且傳入規(guī)則
const router = new VueRouter({
routes,
mode: "history" //路由模式(默認為hash模式)
})6.把路由對象注入到new Vue實例中
new Vue({
router, //導入路由對象
render: h => h(App),
}).$mount('#app')7.用router-view作為掛載點, 切換不同的路由頁面
當url的hash值路徑切換，顯示規(guī)則里對應的組件
router-view 實現(xiàn)路由內(nèi)容的地方，引入組件時寫到需要引入的地方 需要注意的是，使用vue-router控制路由則必須router-view作為容器。（可以先引入根組件App.vue中進行自測）
注意: 一切都要以url上hash值為準
二、聲明式-router-link 【實現(xiàn)跳轉(zhuǎn)最簡單的方法】
1.可用組件router-link來替代a標簽
router-link是vue-router提供了一個全局組件- router-link實質(zhì)上最終會渲染成a鏈接 to屬性等價于提供 href屬性(to無需#)
- router-link提供了聲明式導航高亮的功能(自帶類名)
代碼如下：
<template>
<div>
<div class="footer_wrap">
<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>
//在控制臺元素檢查時會發(fā)現(xiàn)激活的類名 在樣式style中定義高亮樣式 點擊時就會高亮router-link好處 : 自帶激活時的類名, 可以做高亮
2.在跳轉(zhuǎn)路由時, 可以給路由對應的組件內(nèi)傳值
在router-link上的to屬性傳值, 語法格式如下 :
(方式一)
to=/path?參數(shù)名=值
例：
to="/part?name=小明"
對應頁面組件接收傳遞過來的值
$route.query.參數(shù)名
接收數(shù)據(jù)：$route.query.name
(方式二)
to=“/path/值” (需在路由規(guī)則里配置/path/:參數(shù)名)
例：
to="/part/小王"配置：
path:"/part/:username"
對應頁面組件接收傳遞過來的值 （注意動態(tài)參數(shù)需要用params接收）
$route.params.參數(shù)名
接收數(shù)據(jù)：$route.params.username
三、編程式-用JS代碼來進行跳轉(zhuǎn)
用JS代碼來進行跳轉(zhuǎn)
語法: path或者name任選一個
1、$ router 和 $ route的區(qū)別
$router : 是路由操作對象，只寫對象
$route : 路由信息對象，只讀對象
$ 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ū)別（重要）
params傳參，push里面只能是 name:‘xxx’,不能是path:‘/xxx’,因為params只能用name來引入路由，如果這里寫成了path，接收參數(shù)頁面會是undefined?。?！
通過params傳參
this.$router.push({
name:"Home",
params:{
id:this.id
}
})另一個頁面接收:
這里使用params傳參就需要寫params接收
this.$route.params.id
通過query傳參
this.$router.push({
path:"/Search",
query:{ //query是個配置項
age:20
}
})另一個頁面接收
this.$route.query.age
query相當于GET請求，頁面跳轉(zhuǎn)的時候，可以在地址欄看到請求參數(shù)
uery傳參**
this.$router.push({
path:"/Search",
query:{ //query是個配置項
age:20
}
})另一個頁面接收
this.$route.query.age
總結
query相當于GET請求，頁面跳轉(zhuǎn)的時候，可以在地址欄看到請求參數(shù)
params相當于POST請求，參數(shù)不會在地址欄中顯示
以上就是Vue中實現(xiàn)路由跳轉(zhuǎn)的三種方式(超詳細整理)的詳細內(nèi)容，更多關于Vue路由跳轉(zhuǎn)的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要為大家介紹了Vite的createServer啟動源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
隨著前端技術的不斷發(fā)展,地圖應用在我們的項目中越來越常見,本文將介紹如何在Vue3項目中集成高德地圖,并通過簡單的配置實現(xiàn)地圖的平移和縮放功能,需要的朋友可以參考下2024-09-09
這篇文章主要給大家介紹了關于vue3?Table分頁保留選中狀態(tài)的相關資料,vue table組件是一個非常方便的表格組件,它可以幫助我們實現(xiàn)分頁和選中功能,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了Vue提示框組件vue-notification使用詳解,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
Vue.config.js配置報錯ValidationError:?Invalid?options?object解
這篇文章主要給大家介紹了關于Vue.config.js配置報錯ValidationError:?Invalid?options?object的解決辦法,主要由于vue.config.js配置文件錯誤導致的,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了在VUE style中使用data中的變量的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-06-06
vue2.0 element-ui中el-select選擇器無法顯示選中的內(nèi)容(解決方法)
這篇文章主要介紹了vue2.0 element-ui中的el-select選擇器無法顯示選中的內(nèi)容,在文中小編使用的是element-ui V2.2.3。具體解決方法及示例代碼大家參考下本文2018-08-08
在Vue項目中,通過.env文件配置環(huán)境變量,支持不同環(huán)境下加載不同配置,Vite通過import.meta.env向應用暴露環(huán)境變量,支持基本URL、開發(fā)環(huán)境和生產(chǎn)環(huán)境識別等,.env文件可設置環(huán)境優(yōu)先級,修改后需重啟生效,TypeScript可通過增加文件獲取智能提示2024-10-10
vue scroll滾動判斷的實現(xiàn)(是否滾動到底部、滾動方向、滾動節(jié)流、獲取滾動區(qū)域dom元素)
這篇文章主要介紹了vue scroll滾動判斷的實現(xiàn)(是否滾動到底部、滾動方向、滾動節(jié)流、獲取滾動區(qū)域dom元素)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-06-06
Teleport的主要用途是將某些DOM元素渲染到Vue應用之外的DOM 節(jié)點中,這在處理模態(tài)框、通知、加載提示等需要突破當前組件DOM層級的場景時特別有用,本文給大家介紹Vue 3.0 中 Teleport的相關知識,感興趣的朋友一起看看吧2025-05-05