一篇文章帶你瞭解vue路由
概念
路由的本質就是一種對應關系,比如說我們在url地址中輸入我們要訪問的url地址之後,瀏覽器要去請求這個url地址對應的資源。
那麼url地址和真實的資源之間就有一種對應的關系,就是路由。
路由分為前端路由和後端路由
1).後端路由是由服務器端進行實現,並完成資源的分發
後端路由性能相對前端路由來說較低,所以,我們接下來主要學習的是前端路由
2).前端路由是依靠hash值(錨鏈接)的變化進行實現
前端路由的基本概念:根據不同的事件來顯示不同的頁面內容,即事件與事件處理函數之間的對應關系
前端路由主要做的事情就是監聽事件並分發執行事件處理函數
Vue Router
簡介
它是一個Vue.js官方提供的路由管理器。是一個功能更加強大的前端路由器,推薦使用。
Vue Router和Vue.js非常契合,可以一起方便的實現SPA(single page web application,單頁應用程序)應用程序的開發。
Vue Router依賴於Vue,所以需要先引入Vue,再引入Vue Router
Vue Router的特性
- 支持H5歷史模式或者hash模式
- 支持嵌套路由
- 支持路由參數
- 支持編程式路由
- 支持命名路由
- 支持路由導航守衛
- 支持路由過渡動畫特效
- 支持路由懶加載
- 支持路由滾動行為
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.配置路由規則並創建路由實例
var myRouter = new VueRouter({ //routes是路由規則數組 routes:[ //每一個路由規則都是一個對象,對象中至少包含path和component兩個屬性 //path表示 路由匹配的hash地址,component表示路由規則對應要展示的組件對象 {path:"/user",component:User}, {path:"/login",component:Login} ] })
6.將路由掛載到Vue實例中
new Vue({ el:"#app", //通過router屬性掛載路由對象 router:myRouter})new Vue({ el:"#app", //通過router屬性掛載路由對象 router:myRouter })
補充:
路由重定向:可以通過路由重定向為頁面設置默認展示的組件
在路由規則中添加一條路由規則即可,如
var myRouter = new VueRouter({ //routes是路由規則數組 routes: [ //path設置為/表示頁面最初始的地址 / ,redirect表示要被重定向的新地址,設置為一個路由即可 { path:"/",redirect:"/user"}, { path: "/user", component: User }, { path: "/login", component: Login } ] })
分類
嵌套路由
嵌套路由最關鍵的代碼在於理解子級路由的概念:
比如我們有一個/login的路由
那麼/login下面還可以添加子級路由,如:
/login/account
/login/phone
動態路由
補充:
1.我們可以通過props來接收參數
2、還有一種情況,我們可以將props設置為對象,那麼就直接將對象的數據傳遞給組件進行使用
3、如果想要獲取傳遞的參數值還想要獲取傳遞的對象數據,那麼props應該設置為函數形式。
命名路由
給路由取別名
編程式導航
調用js的api方法實現導航
總結
本篇文章就到這裡瞭,希望能夠給你帶來幫助,也希望您能夠多多關註WalkonNet的更多內容!
推薦閱讀:
- Vue路由vue-router詳細講解指南
- vue-route路由管理的安裝與配置方法
- Vue-router編程式導航的兩種實現代碼
- vue3配置router路由並實現頁面跳轉功能
- Vue路由router詳解