一篇文章帶你了解vue路由
概念
路由的本質(zhì)就是一種對(duì)應(yīng)關(guān)系,比如說我們?cè)趗rl地址中輸入我們要訪問的url地址之后,瀏覽器要去請(qǐng)求這個(gè)url地址對(duì)應(yīng)的資源。
那么url地址和真實(shí)的資源之間就有一種對(duì)應(yīng)的關(guān)系,就是路由。
路由分為前端路由和后端路由
1).后端路由是由服務(wù)器端進(jìn)行實(shí)現(xiàn),并完成資源的分發(fā)
后端路由性能相對(duì)前端路由來說較低,所以,我們接下來主要學(xué)習(xí)的是前端路由
2).前端路由是依靠hash值(錨鏈接)的變化進(jìn)行實(shí)現(xiàn)
前端路由的基本概念:根據(jù)不同的事件來顯示不同的頁面內(nèi)容,即事件與事件處理函數(shù)之間的對(duì)應(yīng)關(guān)系
前端路由主要做的事情就是監(jiān)聽事件并分發(fā)執(zhí)行事件處理函數(shù)
Vue Router
簡介
它是一個(gè)Vue.js官方提供的路由管理器。是一個(gè)功能更加強(qiáng)大的前端路由器,推薦使用。
Vue Router和Vue.js非常契合,可以一起方便的實(shí)現(xiàn)SPA(single page web application,單頁應(yīng)用程序)應(yīng)用程序的開發(fā)。
Vue Router依賴于Vue,所以需要先引入Vue,再引入Vue Router
Vue Router的特性
- 支持H5歷史模式或者h(yuǎn)ash模式
- 支持嵌套路由
- 支持路由參數(shù)
- 支持編程式路由
- 支持命名路由
- 支持路由導(dǎo)航守衛(wèi)
- 支持路由過渡動(dòng)畫特效
- 支持路由懶加載
- 支持路由滾動(dòng)行為
Vue Router的使用步驟
1.導(dǎo)入js文件
<script src="lib/vue_2.5.22.js"></script> <script src="lib/vue-router_3.0.2.js"></script>
2.添加路由鏈接:是路由中提供的標(biāo)簽,默認(rèn)會(huì)被渲染為a標(biāo)簽,to屬性默認(rèn)被渲染為href屬性,to屬性的值會(huì)被渲染為#開頭的hash地址
<router-link to="/user">User</router-link>
3.添加路由填充位(路由占位符)
<router-view></router-view>
4.定義路由組件
var User = { template:"<div>This is User</div>" }
5.配置路由規(guī)則并創(chuàng)建路由實(shí)例
var myRouter = new VueRouter({ //routes是路由規(guī)則數(shù)組 routes:[ //每一個(gè)路由規(guī)則都是一個(gè)對(duì)象,對(duì)象中至少包含path和component兩個(gè)屬性 //path表示 路由匹配的hash地址,component表示路由規(guī)則對(duì)應(yīng)要展示的組件對(duì)象 {path:"/user",component:User}, {path:"/login",component:Login} ] })
6.將路由掛載到Vue實(shí)例中
new Vue({ el:"#app", //通過router屬性掛載路由對(duì)象 router:myRouter})new Vue({ el:"#app", //通過router屬性掛載路由對(duì)象 router:myRouter })
補(bǔ)充:
路由重定向:可以通過路由重定向?yàn)轫撁嬖O(shè)置默認(rèn)展示的組件
在路由規(guī)則中添加一條路由規(guī)則即可,如
var myRouter = new VueRouter({ //routes是路由規(guī)則數(shù)組 routes: [ //path設(shè)置為/表示頁面最初始的地址 / ,redirect表示要被重定向的新地址,設(shè)置為一個(gè)路由即可 { path:"/",redirect:"/user"}, { path: "/user", component: User }, { path: "/login", component: Login } ] })
分類
嵌套路由
嵌套路由最關(guān)鍵的代碼在于理解子級(jí)路由的概念:
比如我們有一個(gè)/login的路由
那么/login下面還可以添加子級(jí)路由,如:
/login/account
/login/phone
動(dòng)態(tài)路由
補(bǔ)充:
1.我們可以通過props來接收參數(shù)
2、還有一種情況,我們可以將props設(shè)置為對(duì)象,那么就直接將對(duì)象的數(shù)據(jù)傳遞給組件進(jìn)行使用
3、如果想要獲取傳遞的參數(shù)值還想要獲取傳遞的對(duì)象數(shù)據(jù),那么props應(yīng)該設(shè)置為函數(shù)形式。
命名路由
給路由取別名
編程式導(dǎo)航
調(diào)用js的api方法實(shí)現(xiàn)導(dǎo)航
總結(jié)
本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
vue3語法中使用vscode打開滿屏紅線報(bào)錯(cuò)的完美解決方法
這篇文章主要介紹了vue3語法中使用vscode打開滿屏紅線報(bào)錯(cuò)的完美解決方法,本文通過圖文并茂的形式給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-06-06vue-cli 項(xiàng)目打包完成后運(yùn)行文件路徑報(bào)錯(cuò)問題
這篇文章主要介紹了vue-cli 項(xiàng)目打包完成后運(yùn)行文件路徑報(bào)錯(cuò)問題,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07vue使用element-ui的el-input監(jiān)聽不了回車事件的解決方法
小編在使用element-ui時(shí),el-input組件監(jiān)聽不了回車事件,怎么回事呢?下面小編給大家?guī)砹藇ue使用element-ui的el-input監(jiān)聽不了回車事件的解決方法,一起看看吧2018-01-01詳解Vue demo實(shí)現(xiàn)商品列表的展示
這篇文章主要介紹了Vue demo實(shí)現(xiàn)商品列表的展示,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05利用Vue3實(shí)現(xiàn)一個(gè)可以用js調(diào)用的組件
最近遇到個(gè)功能要求,想要在全局中調(diào)用組件,而且要在某些js文件內(nèi)調(diào)用,所以這篇文章主要給大家介紹了關(guān)于如何利用Vue3實(shí)現(xiàn)一個(gè)可以用js調(diào)用的組件的相關(guān)資料,需要的朋友可以參考下2021-08-08解決在vue的mounted中獲取對(duì)象為null問題
這篇文章主要介紹了解決在vue的mounted中獲取對(duì)象為null問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03如何利用vue+vue-router+elementUI實(shí)現(xiàn)簡易通訊錄
這篇文章主要介紹了如何利用vue+vue-router+elementUI實(shí)現(xiàn)簡易通訊錄,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-05-05vue.js云存儲(chǔ)實(shí)現(xiàn)圖片上傳功能
示對(duì)象存儲(chǔ)是騰訊云提供的一種存儲(chǔ)海量文件的分布式存儲(chǔ)服務(wù),本文主要介紹了用vue.js實(shí)現(xiàn)圖片上傳功能,感興趣的小伙伴們可以參考一下2021-05-05如何用electron把vue項(xiàng)目打包為桌面應(yīng)用exe文件
這篇文章主要介紹了如何用electron把vue項(xiàng)目打包為桌面應(yīng)用exe文件,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-05-05