day05_vue路由
文章目錄
- 1.路由的概念
- 2.前端路由的初體驗
- 3.Vue Router簡介
- 4.Vue Router的使用步驟(★★★)
- 5.嵌套路由，動態路由的實現方式
- A.嵌套路由的概念(★★★)
- B.動態路由匹配(★★★)
- 7.命名路由以及編程式導航
- A.命名路由：給路由取別名
- B.編程式導航(★★★)
- 8.實現后臺管理案例(★★★)
1.能夠說出什么是路由
2.能夠說出前端路由的實現原理
3.能夠使用Vue-Router實現前端路由
4.能夠實現嵌套路由，動態路由
5.能夠實現命名路由以及編程式導航
6.理解并實現后臺管理案例
1.路由的概念
? 路由的本質就是一種對應關系，比如說我們在url地址中輸入我們要訪問的url地址之后，瀏覽器要去請求這個url地址對應的資源。
? 那么url地址和真實的資源之間就有一種對應的關系，就是路由。
? 路由分為前端路由和后端路由
1).后端路由是由服務器端進行實現，并完成資源的分發
2).前端路由是依靠hash值(錨鏈接)的變化進行實現
? 后端路由性能相對前端路由來說較低，所以，我們接下來主要學習的是前端路由
? 前端路由的基本概念：根據不同的事件來顯示不同的頁面內容，即事件與事件處理函數之間的對應關系
? 前端路由主要做的事情就是監聽事件并分發執行事件處理函數
2.前端路由的初體驗
? 前端路由是基于hash值的變化進行實現的（比如點擊頁面中的菜單或者按鈕改變URL的hash值，根據hash值的變化來控制組件的切換）
? 核心實現依靠一個事件，即監聽hash值變化的事件
前端路由實現tab欄切換：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title><!-- 導入 vue 文件 --><script src="./lib/vue_2.5.22.js"></script></head><body><!-- 被 vue 實例控制的 div 區域 --><div id="app"><!-- 切換組件的超鏈接 --><a href="#/zhuye">主頁</a> <a href="#/keji">科技</a> <a href="#/caijing">財經</a><a href="#/yule">娛樂</a><!-- 根據 :is 屬性指定的組件名稱，把對應的組件渲染到 component 標簽所在的位置 --><!-- 可以把 component 標簽當做是【組件的占位符】 --><component :is="comName"></component></div><script>// #region 定義需要被切換的 4 個組件// 主頁組件const zhuye = {template: '<h1>主頁信息</h1>'}// 科技組件const keji = {template: '<h1>科技信息</h1>'}// 財經組件const caijing = {template: '<h1>財經信息</h1>'}// 娛樂組件const yule = {template: '<h1>娛樂信息</h1>'}// #endregion// #region vue 實例對象const vm = new Vue({el: '#app',data: {comName: 'zhuye'},// 注冊私有組件components: {zhuye,keji,caijing,yule}})// #endregion// 監聽 window 的 onhashchange 事件，根據獲取到的最新的 hash 值，切換要顯示的組件的名稱window.onhashchange = function() {// 通過 location.hash 獲取到最新的 hash 值console.log(location.hash);switch(location.hash.slice(1)){case '/zhuye':vm.comName = 'zhuye'breakcase '/keji':vm.comName = 'keji'breakcase '/caijing':vm.comName = 'caijing'breakcase '/yule':vm.comName = 'yule'break}}</script></body></html>案例效果圖：
點擊每個超鏈接之后，會進行相應的內容切換，如下：
核心思路：
在頁面中有一個vue實例對象，vue實例對象中有四個組件，分別是tab欄切換需要顯示的組件內容
在頁面中有四個超鏈接，如下：
? 當我們點擊這些超鏈接的時候，就會改變url地址中的hash值，當hash值被改變時，就會觸發onhashchange事件
? 在觸發onhashchange事件的時候，我們根據hash值來讓不同的組件進行顯示：
3.Vue Router簡介
? 它是一個Vue.js官方提供的路由管理器。是一個功能更加強大的前端路由器，推薦使用。
Vue Router和Vue.js非常契合，可以一起方便的實現SPA(single page web application,單頁應用程序)應用程序的開發。
? Vue Router依賴于Vue，所以需要先引入Vue，再引入Vue Router
Vue Router的特性：
支持H5歷史模式或者hash模式
支持嵌套路由
支持路由參數
支持編程式路由
支持命名路由
支持路由導航守衛
支持路由過渡動畫特效
支持路由懶加載
支持路由滾動行為
4.Vue Router的使用步驟(★★★)
? A.導入js文件
<script src="lib/vue_2.5.22.js"></script> <script src="lib/vue-router_3.0.2.js"></script>? B.添加路由鏈接:是路由中提供的標簽，默認會被渲染為a標簽，to屬性默認被渲染為href屬性，
to屬性的值會被渲染為#開頭的hash地址
User
Login
? C.添加路由填充位（路由占位符）
? D.定義路由組件
? E.配置路由規則并創建路由實例
vue中router-link和傳統a鏈接的區別
var myRouter = new VueRouter({//routes是路由規則數組routes:[//每一個路由規則都是一個對象，對象中至少包含path和component兩個屬性//path表示 路由匹配的hash地址，component表示路由規則對應要展示的組件對象{path:"/user",component:User},{path:"/login",component:Login}] })? F.將路由掛載到Vue實例中
new Vue({el:"#app",//通過router屬性掛載路由對象router:myRouter })小結：
Vue Router的使用步驟還是比較清晰的，按照步驟一步一步就能完成路由操作
A.導入js文件
B.添加路由鏈接
C.添加路由占位符(最后路由展示的組件就會在占位符的位置顯示)
D.定義路由組件
E.配置路由規則并創建路由實例
F.將路由掛載到Vue實例中
補充：
路由重定向：可以通過路由重定向為頁面設置默認展示的組件
在路由規則中添加一條路由規則即可，如下：
5.嵌套路由，動態路由的實現方式
A.嵌套路由的概念(★★★)
當我們進行路由的時候顯示的組件中還有新的子級路由鏈接以及內容。
嵌套路由最關鍵的代碼在于理解子級路由的概念：
比如我們有一個/login的路由
那么/login下面還可以添加子級路由，如:
/login/account
/login/phone
參考代碼如下：
var User = { template: "<div>This is User</div>" } //Login組件中的模板代碼里面包含了子級路由鏈接以及子級路由的占位符var Login = { template: `<div><h1>This is Login</h1><hr><router-link to="/login/account">賬號密碼登錄</router-link><router-link to="/login/phone">掃碼登錄</router-link><!-- 子路由組件將會在router-view中顯示 --><router-view></router-view></div>` }//定義兩個子級路由組件var account = { template:"<div>賬號：<input><br>密碼：<input></div>"};var phone = { template:"<h1>掃我二維碼</h1>"};var myRouter = new VueRouter({//routes是路由規則數組routes: [{ path:"/",redirect:"/user"},{ path: "/user", component: User },{ path: "/login", component: Login,//通過children屬性為/login添加子路由規則children:[{ path: "/login/account", component: account },{ path: "/login/phone", component: phone },]}]})var vm = new Vue({el: '#app',data: {},methods: {},router:myRouter});頁面效果大致如下：
B.動態路由匹配(★★★)
var User = { template:"<div>用戶：{{$route.params.id}}</div>"}var myRouter = new VueRouter({//routes是路由規則數組routes: [//通過/:參數名 的形式傳遞參數 { path: "/user/:id", component: User }, ] })補充：
如果使用$route.params.id來獲取路徑傳參的數據不夠靈活。
1.我們可以通過props來接收參數
2.還有種情況，我們可以將props設置為對象，那么就直接將對象的數據傳遞給
組件進行使用
3.如果想要獲取傳遞的參數值還想要獲取傳遞的對象數據，那么props應該設置為
函數形式。
7.命名路由以及編程式導航
A.命名路由：給路由取別名
案例：
})var myRouter = new VueRouter({//routes是路由規則數組routes: [//通過name屬性為路由添加一個別名{ path: "/user/:id", component: User, name:"user"}, ] })//添加了別名之后，可以使用別名進行跳轉 <router-link to="/user">User</router-link> <router-link :to="{ name:'user' , params: {id:123} }">User</router-link>//還可以編程式導航 myRouter.push( { name:'user' , params: {id:123} } )B.編程式導航(★★★)
頁面導航的兩種方式：
? A.聲明式導航：通過點擊鏈接的方式實現的導航
? B.編程式導航：調用js的api方法實現導航
Vue-Router中常見的導航方式：
this.$router.push("hash地址"); this.$router.push("/login"); this.$router.push({ name:'user' , params: {id:123} }); this.$router.push({ path:"/login" }); this.$router.push({ path:"/login",query:{username:"jack"} });this.$router.go( n );//n為數字，參考history.go this.$router.go( -1 );8.實現后臺管理案例(★★★)
案例效果：
點擊左側的"用戶管理",“權限管理”,“商品管理”,“訂單管理”,"系統設置"都會出現對應的組件并展示內容
其中"用戶管理"組件展示的效果如上圖所示，在用戶管理區域中的詳情鏈接也是可以點擊的，點擊之后將會顯示用戶詳情信息。
案例思路：
1).先將素材文件夾中的11.基于vue-router的案例.html復制到我們自己的文件夾中。
看一下這個文件中的代碼編寫了一些什么內容，
這個頁面已經把后臺管理頁面的基本布局實現了
2).在頁面中引入vue，vue-router
3).創建Vue實例對象，準備開始編寫代碼實現功能
4).希望是通過組件的形式展示頁面的主體內容，而不是寫死頁面結構，所以我們可以定義一個根組件：
5).當我們訪問頁面的時候，默認需要展示剛剛創建的app根組件，我們可以
創建一個路由對象來完成這個事情,然后將路由掛載到Vue實例對象中即可
補充：到此為止，基本的js代碼都處理完畢了，我們還需要設置一個路由占位符
<body><div id="app"><router-view></router-view></div> </body>6).此時我們打開頁面應該就可以得到一個VueRouter路由出來的根組件了
我們需要在這個根組件中繼續路由實現其他的功能子組件
先讓我們更改根組件中的模板：更改左側li為子級路由鏈接，并在右側內容區域添加子級組件占位符
然后，我們要為子級路由創建并設置需要顯示的子級組件
//建議創建的組件首字母大寫，和其他內容區分 const Users = {template:`<div><h3>用戶管理</h3> </div>`} const Access = {template:`<div><h3>權限管理</h3> </div>`} const Goods = {template:`<div><h3>商品管理</h3> </div>`} const Orders = {template:`<div><h3>訂單管理</h3> </div>`} const Systems = {template:`<div><h3>系統管理</h3> </div>`}//添加子組件的路由規則 const myRouter = new VueRouter({routes:[{path:"/",component:app , children:[{ path:"/users",component:Users },{ path:"/accesses",component:Access },{ path:"/goods",component:Goods },{ path:"/orders",component:Orders },{ path:"/systems",component:Systems },]}] })const vm = new Vue({el:"#app",data:{},methods:{},router:myRouter })7).展示用戶信息列表：
A.為Users組件添加私有數據,并在模板中循環展示私有數據
8.當用戶列表展示完畢之后，我們可以點擊列表中的詳情來顯示用戶詳情信息，首先我們需要創建一個組件，用來展示詳情信息
const UserInfo = {props:["id"],template:`<div><h5>用戶詳情</h5><p>查看 {{id}} 號用戶信息</p><button @click="goBack">返回用戶詳情頁</button></div> `,methods:{goBack(){//當用戶點擊按鈕，后退一頁this.$router.go(-1);}}}然后我們需要設置這個組件的路由規則
const myRouter = new VueRouter({routes:[{path:"/",component:app , children:[{ path:"/users",component:Users },//添加一個/userinfo的路由規則{ path:"/userinfo/:id",component:UserInfo,props:true},{ path:"/accesses",component:Access },{ path:"/goods",component:Goods },{ path:"/orders",component:Orders },{ path:"/systems",component:Systems },]}] })const vm = new Vue({el:"#app",data:{},methods:{},router:myRouter })再接著給用戶列表中的詳情a連接添加事件
const Users = {data(){return {userList:[{id:1,name:"zs",age:18},{id:2,name:"ls",age:19},{id:3,name:"wang",age:20},{id:4,name:"jack",age:21},]}},template:`<div><h3>用戶管理</h3><table><thead><tr><th>編號</th><th>姓名</th><th>年齡</th><th>操作</th></tr></thead><tbody><tr :key="item.id" v-for="item in userList"><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.age}}</td><td><a href="javascript:;" @click="goDetail(item.id)">詳情</a></td></tr></tbody></table></div>`,methods:{goDetail(id){this.$router.push("/userinfo/"+id);}} } 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的day05_vue路由的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 不是人问的
- 下一篇： day07-vue项目-搭建项目到登录功