概念

路由的本質(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的使用步驟

導(dǎo)入js文件

<script src="lib/vue_2.5.22.js"></script> <script src="lib/vue-router_3.0.2.js"></script>

添加路由鏈接:是路由中提供的標(biāo)簽，默認(rèn)會(huì)被渲染為a標(biāo)簽，to屬性默認(rèn)被渲染為href屬性，to屬性的值會(huì)被渲染為#開頭的hash地址

<router-link to="/user">User</router-link>

添加路由填充位（路由占位符）

<router-view></router-view>

定義路由組件

var User = { template:"<div>This is User</div>" }

配置路由規(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}] })

將路由掛載到Vue實(shí)例中

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)航

寫在最后

?$原創(chuàng)不易，還希望各位大佬支持一下$

👍 $點(diǎn)贊，你的認(rèn)可是我創(chuàng)作的動(dòng)力！$

?? $收藏，你的青睞是我努力的方向！$

?? $評(píng)論，你的意見是我進(jìn)步的財(cái)富！$

總結(jié)

以上是生活随笔為你收集整理的vue路由详解版一目了然的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。