2023-2-20 藍(lán)藍(lán)設(shè)計(jì)的小編
目錄
確保我們在vue中實(shí)現(xiàn)頁面跳轉(zhuǎn)到我們所想的頁面
可以看到當(dāng)我們點(diǎn)擊不同的組件的時(shí)候我們實(shí)現(xiàn)了路由的功能：在vue中實(shí)現(xiàn)頁面的跳轉(zhuǎn)
注意看，當(dāng)我點(diǎn)擊的時(shí)候上面地址欄中加載了不同的網(wǎng)頁。下面我們來學(xué)習(xí)下路由的寫法
路由書寫寫法：
在index.js中的router對象中書寫
-
const router = new VueRouter({
-
mode: 'history',//默認(rèn)是hash模式
-
})
hash模式：
history模式：
兩種模式的區(qū)別：
起步 | Vue RouterVue Router3官網(wǎng)介紹： 起步 | Vue Router
- 下載與導(dǎo)入vue-router
- 導(dǎo)入組件
- 創(chuàng)建routes路由規(guī)則（路徑和頁面一一對應(yīng)）
- 創(chuàng)建路由對象
- 把路由對象掛載到App.vue
- 在頁面寫路由導(dǎo)航router-link （生成a標(biāo)簽）
- 在頁面寫路由出口router-view (生成占位盒子，用于顯示頁面內(nèi)容)
下面開始我們相關(guān)文件的創(chuàng)建
1.創(chuàng)建我們的腳手架(此時(shí)沒有選擇Router)：
2.準(zhǔn)備我們的App.vue文件：
-
<template>
-
<div>
-
<!-- 頂部導(dǎo)航欄 -->
-
<div class="footer_wrap">
-
<a href="#/find">發(fā)現(xiàn)音樂</a>
-
<a href="#/my">我的音樂</a>
-
<a href="#/friend">朋友</a>
-
</div>
-
<!-- 下面內(nèi)容 -->
-
<div class="top"></div>
-
</div>
-
</template>
-
-
<script>
-
export default {
-
methods: {}
-
}
-
</script>
-
-
<style scoped>
-
body,
-
html {
-
margin: 0;
-
padding: 0;
-
}
-
.footer_wrap {
-
position: fixed;
-
left: 0;
-
top: 0;
-
display: flex;
-
width: 100%;
-
text-align: center;
-
background-color: #333;
-
color: #ccc;
-
}
-
.footer_wrap a,
-
span {
-
cursor: pointer;
-
flex: 1;
-
text-decoration: none;
-
padding: 20px 0;
-
line-height: 20px;
-
background-color: #333;
-
color: #ccc;
-
border: 1px solid black;
-
}
-
.footer_wrap a:hover,
-
span:hover {
-
background-color: #555;
-
}
-
-
.top {
-
padding-top: 62px;
-
}
-
-
.footer_wrap .router-link-active {
-
background-color: #000;
-
}
-
</style>
3.在src下面新建views文件夾并創(chuàng)建我們需要的.vue文件
3.1 find.vue
-
<template>
-
<div>
-
<div class="nav_main">
-
<router-link to="/Ranking">排行</router-link>
-
<router-link to="/Recommend">推薦</router-link>
-
<router-link to="/SongList">歌單</router-link>
-
</div>
-
-
<div style="1px solid red;">
-
<router-view></router-view>
-
</div>
-
</div>
-
</template>
-
-
<script>
-
export default {
-
name: 'find',
-
}
-
</script>
-
-
<style scoped>
-
.nav_main {
-
background-color: red;
-
color: white;
-
padding: 10px 0;
-
}
-
.nav_main a {
-
text-align: center;
-
text-decoration: none;
-
color: white;
-
font-size: 12px;
-
margin: 7px 17px 0;
-
padding: 0px 15px 2px 15px;
-
height: 20px;
-
display: inline-block;
-
line-height: 20px;
-
border-radius: 20px;
-
}
-
.nav_main a:hover {
-
background-color: brown;
-
}
-
.nav_main .router-link-active{
-
background-color: brown;
-
}
-
</style>
3.2 my.vue
-
<template>
-
<div>
-
<img src="../assets/my.png" alt="" width="100%">
-
</div>
-
</template>
-
-
<script>
-
export default {
-
name: 'my',
-
};
-
</script>
-
-
<style scoped>
-
-
</style>
3.3 friend.vue
-
<template>
-
<div>
-
<ul>
-
<li>這是當(dāng)前頁面 query 接收到的參數(shù):
-
<span>姓名：{{ $route.query.name }}</span> --
-
<span>年齡：{{$route.query.age}}</span>
-
</li>
-
<li>這是當(dāng)前頁面 params 接收到的參數(shù):
-
<!-- <span>姓名：{{ $route.params.name }}</span> --
-
<span>年齡：{{ $route.params.age }}</span> -->
-
</li>
-
</ul>
-
</div>
-
</template>
-
-
<script>
-
export default {
-
name: 'friend',
-
};
-
</script>
-
-
<style scoped>
-
-
</style>
3.4 notfound.vue
-
<template>
-
<div class="box">
-
<h1>這是一個(gè) 404 頁面</h1>
-
<img src="../assets/404.png" alt="">
-
</div>
-
</template>
-
-
<script>
-
export default {
-
name: 'notfound',
-
data() {
-
return {
-
-
};
-
},
-
-
};
-
</script>
-
-
<style scoped>
-
.box {
-
display: flex;
-
flex-direction: column;
-
justify-content: center;
-
align-items: center;
-
}
-
</style>
4.準(zhǔn)備圖片素材（所有素材可私信博主獲?。?
5.所有準(zhǔn)備工作做完現(xiàn)在開始我們的文件配置
1.下載與導(dǎo)入vue-router
npm i vue-router@3.6.5
導(dǎo)入vue-router (在main.js中)
-
//main.js中導(dǎo)入
-
// 0.導(dǎo)入路由
-
import VueRouter from 'vue-router'
-
// 使用vue的插件，都需要調(diào)用Vue.use()
-
Vue.use(VueRouter)
2.導(dǎo)入組件
@符號代表 /src 文件夾的絕對路徑，在腳手架中文件比較多的時(shí)候，使用這個(gè)@符號會更加的方便
在main.js中導(dǎo)入
-
// 導(dǎo)入組件
-
import find from '@/views/find.vue'
-
import friend from '@/views/friend.vue'
-
import my from '@/views/my.vue'
-
import notfound from '@/views/notfound.vue'
3.創(chuàng)建路由規(guī)則
路由規(guī)則作用： 設(shè)置 url 和 組件 對應(yīng)的規(guī)則
在main.js中寫入
-
// 路由規(guī)則
-
const routes = [
-
{ path: '/find', component: find },
-
{ path: '/friend', name: 'friend', component: friend },
-
{ path: '/my', component: my },
-
{ path: '/notfound', component: notfound },
-
]
4.創(chuàng)建路由對象
路由對象： 幫你管理這些路由規(guī)則
在main.js中寫入
-
// 創(chuàng)建路由對象
-
const router = new VueRouter({
-
routes// (縮寫) 相當(dāng)于 routes: routes
-
})
5.掛載路由到根組件
掛載到根組件作用：讓你的整個(gè)應(yīng)用都有路由功能
在main.js中寫入
-
// 掛載路由到根組件
-
new Vue({
-
router,
-
render: h => h(App)
-
}).$mount('#app')
6.在頁面寫路由導(dǎo)航router-link
作用與a標(biāo)簽一樣實(shí)現(xiàn)跳轉(zhuǎn)，好處：當(dāng)點(diǎn)擊鏈接的時(shí)候自帶一個(gè)專屬類名
在App.vue中我們將傳統(tǒng)的a標(biāo)簽進(jìn)行替換：
替換a標(biāo)簽原因：便于我們做專屬效果
我們選中點(diǎn)擊的超鏈接做觸發(fā)效果：
7在頁面寫路由出口router-view
占位盒子，用于渲染路由匹配到的組件
（<router-view> : 是vue內(nèi)置的一個(gè)組件,會自動替換成路由匹配的組件 ）
好了一個(gè)最最最基本的路由就被我們制作完成啦！下面我們來看看效果：
上述的操作有些許麻煩，下面我們來使用我們開發(fā)中常用的自動配置方法
創(chuàng)建腳手架方式與手動配置類似，唯一不同是此處必須選擇Router
對比手動模式：
此刻：腳手架已經(jīng)幫我們創(chuàng)建好了Router路由不需要我們下載與導(dǎo)入vue-router了
只需要寫：
- 導(dǎo)入組件
- 配置路由規(guī)則
- 路由導(dǎo)航
- 路由出口
并且為了進(jìn)一步的封裝我們的配置信息，我們的配置代碼將寫在router/index.js下，不再是全部寫在main.js下。
1.導(dǎo)入組件（index.js中）
-
import find from '@/views/find.vue'
-
import friend from '@/views/friend.vue'
-
import my from '@/views/my.vue'
-
import notfound from '@/views/notfound.vue'
2.配置路由規(guī)則（index.js中）
-
{ path: '/find', component: find },
-
{ path: '/friend', name: 'friend', component: friend },
-
{ path: '/my', component: my },
-
{ path: '/notfound', component: notfound }
3.路由導(dǎo)航（直接cv我們之前的App.vue文件）
-
<router-link to="/find">發(fā)現(xiàn)音樂</router-link>
-
<router-link to="/my">我的音樂</router-link>
-
<router-link to="/friend">朋友</router-link>
4.路由出口（App.vue中）
-
<div class="top">
-
<router-view></router-view>
-
</div>
效果查看：
自動配置省去了一些固定不變的操作，我們不需要寫繁瑣且固定的代碼，只需要寫不同的代碼。且代碼書寫的位置都給我們設(shè)置好了，我們直接遵守該規(guī)范書寫代碼即可
路由重定向官方文檔：重定向和別名 | Vue Router
重定向應(yīng)用場景： 頁面輸入根路徑/ , 自動跳轉(zhuǎn)到首頁
注意點(diǎn): 重定向只是修改路徑， 還需要單獨(dú)去設(shè)置路由匹配規(guī)則
重定向命令：
-
{
-
path: '/',
-
/*
-
(1)重定向只是修改頁面路徑。 輸入 / 會重定向到 /路徑
-
(2)只有component才會讓vue去尋找路由匹配頁面。所以設(shè)置了重定向，還需要單獨(dú)設(shè)置匹配規(guī)則
-
*/
-
redirect: "路徑"
-
},
1. 就拿我們剛才創(chuàng)建的舉例：
實(shí)現(xiàn)效果：當(dāng)我在瀏覽器中打開的時(shí)候我沒有輸入任何路徑，vue自動幫我們跳轉(zhuǎn)到了 my.vue這個(gè)頁面組件
2.也可以利用重定向來設(shè)置當(dāng)我們路徑錯(cuò)誤提示404頁面：
實(shí)現(xiàn)效果：當(dāng)我任意輸入沒有匹配的路徑，自動幫我們跳轉(zhuǎn)到了notfound.vue這個(gè)組件
實(shí)現(xiàn)頁面中存在第二級的跳轉(zhuǎn)
寫法(拿我們上述的案例實(shí)操，需要素材可私信博主喔)：
①在index.js中引入
-
// 導(dǎo)入二級路由
-
import Ranking from '@/views/second/Ranking.vue'
-
import Recommend from '@/views/second/Recommend.vue'
-
import SongList from '@/views/second/SongList.vue'
②在需要引用的組件中使用：
-
//格式：
-
{
-
path: '路徑', component: 組件名, children: [
-
//此處填寫二級路由的路徑信息
-
]
-
}
-
{
-
path: '/find', component: find, children: [
-
{path:'/',redirect:'/SongList'},
-
{ path: '/Ranking', component: Ranking },
-
{ path: '/Recommend', component: Recommend },
-
{ path: '/SongList', component: SongList }
-
]
-
}
③寫路由導(dǎo)航與出口
查看效果：
可以看到：當(dāng)我們點(diǎn)擊一級路由之后，我們還可以點(diǎn)擊二級路由到我們的專屬頁面中
有兩種跳轉(zhuǎn)傳參方式：
- 聲明式導(dǎo)航
- 編程式導(dǎo)航
①query寫法：
在路徑中加參數(shù)信息即可
<router-link to="/路徑?參數(shù)名=參數(shù)值&參數(shù)名=參數(shù)值</router-link>
接收信息：
在觸發(fā)的組件中書寫{{ $route.query.屬性名}}接收
舉個(gè)例子：
②params寫法：
在index.jsx文件中寫：參數(shù)名。在需要傳遞的路由路徑中寫參數(shù)值
接收信息：
在觸發(fā)的組件中書寫{{ $route.params.屬性名}}接收
實(shí)現(xiàn)效果：
①query寫法:
結(jié)構(gòu)：
-
this.$router.push({
-
path: '/路徑',
-
query: { 屬性名: '屬性值'}
-
})
接收信息：
在觸發(fā)的組件中書寫{{ $route.query.屬性名}}接收
舉個(gè)例子：
②params寫法
結(jié)構(gòu):
-
this.$router.push({
-
name: '我們注冊路徑的組件名',//寫path獲取不到值?。?！
-
query: { 屬性名: '屬性值'}
-
})
注意點(diǎn):寫path獲取不到值，需要用name
接收信息：
在觸發(fā)的組件中書寫{{ $route.params.屬性名}}接收
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.bouu.cn