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