路由
路由起步
監(jiān)聽地址欄的改變.根據(jù)改變渲染不同的組件
-
基本使用
下載安裝路由 npm install vue-router
-
創(chuàng)建路由表(項(xiàng)目下的一個(gè)router.js文件)
-
引入vue和vue-router
import vue from 'vue' import vueRouter from 'vue-router' -
在vue中使用vue-router
vue.use(vueRouter) -
創(chuàng)建路由實(shí)例 確定路徑和組件的對(duì)應(yīng)關(guān)系 "/"表示的是根目錄
let router = new vueRouter({ routes:[ { path:'/son1',//地址欄的地址 component:son1//如果你的地址欄變成son1我就渲染son1組件 }, { path:'/son2',//同上 component:son2 } ] }) -
拋出路由實(shí)例
export default router
-
-
在main.js 里注冊(cè)路由
import Vue from 'vue' import App from './App.vue' import router from './router/router'//引入路由文件 Vue.config.productionTip = false new Vue({ router:router, //注冊(cè)路由 // 渲染一個(gè)app組件 render: h => h(App) }).$mount('#app') -
完成main.js注冊(cè)后就可以使用兩個(gè)組件
-
<router-link> 控制地址欄的改變
-
有一個(gè)to屬性來控制地址欄變成啥樣
- to屬性后面跟對(duì)象要加 : 號(hào)
-
-
可以跟組件名
<template> <div id="app"> 這是根組件 <!-- <banner></banner> <box></box> --> <router-link to = '/son1'>son1</router-link> <router-link to = '/son2'>son2</router-link> <router-view></router-view> </div> </template>
- 也可以跟path路徑名(前面要加:號(hào)) ```js <router-link :to ='{path:"/recommend"}' active-class = 'hehe'>recommend</router-link>-
路由命名..就是在路由注冊(cè)表中用name給路由命名
-
也可以跟name屬性(也要加冒號(hào))
<router-link :to ='{name:"hanjie"}' active-class = 'hehe'>recommend</router-link>
-
-
<router-link> 默認(rèn)渲染成<a>標(biāo)簽
tag 用來控制<router-link>渲染成什么標(biāo)簽
-
active-class 激活狀態(tài)類名,只有選中狀態(tài)才會(huì)添加class名
```js <router-link to = '/son1' tag = 'span' active-class = 'hehe'>son1</router-link>
-
<router-view> 開啟一片空間,渲染指定的組件
-
在哪使用直接在哪用就行,起到一個(gè)占位的作用.根據(jù)地址欄渲染不同的組件.可以寫多個(gè).
```js <router-view></router-view> ```
-
路由模式 mode
在路由注冊(cè)表中可以控制路由模式
歷史模式(history) 地址欄中沒有#符號(hào)
-
hash模式 地址欄中有#符號(hào)
let router = new vueRouter({ mode:'history', routes:[ { path:'/son1',//地址欄的地址 component:son1//如果你的地址欄變成son1我就渲染son1組件 }, { path:'/son2',//同上 component:son2 } ]
路由命名
-
路由命名.
- .就是在路由注冊(cè)表中用name給路由命名也可以實(shí)現(xiàn)跳轉(zhuǎn)
- 也可以跟name屬性(也要加冒號(hào))
- .就是在路由注冊(cè)表中用name給路由命名也可以實(shí)現(xiàn)跳轉(zhuǎn)
<router-link :to ='{name:"hanjie"}' active-class = 'hehe'>recommend</router-link>
-
命名視圖
-
在一個(gè)頁面渲染多個(gè)組件時(shí)可以使用
- 在注冊(cè)表中 把component修改成components
{ path:'/namerouter',//同上 name:'namerouter', components:{ default:son1, //默認(rèn)渲染組件 a:son2, b:son3 } } ]- 在使用組件文檔處可以寫成這種模式..
<router-link :to ='{name:"namerouter"}' active-class = 'hehe'>namerouter"</router-link> <router-view></router-view> //不加name默認(rèn)是default:son1 <router-view name='a'></router-view> <router-view name='b'></router-view>
-
重定向和別名
-
重定向(redirect)
-
剛進(jìn)入頁面的時(shí)候不能什么組件都不顯示,所以要設(shè)置一個(gè)默認(rèn)顯示的組件
{ path:'/', //如果地址欄上只顯示/的話 redirect:'/son1' //那就跳轉(zhuǎn)到'./son1' }
-
聲明式導(dǎo)航和編程式導(dǎo)航
-
聲明式導(dǎo)航
- 通過標(biāo)簽實(shí)現(xiàn)跳轉(zhuǎn)頁面..比如<a>標(biāo)簽
- 在路由中使用<router-link>進(jìn)行組件切換的就是聲明式導(dǎo)航
-
編程式導(dǎo)航
通過代碼實(shí)現(xiàn)跳轉(zhuǎn)頁面的...比如js中的window.location.href=‘path’
-
在路由中由對(duì)象下的api 進(jìn)行組件切換的叫做編程式導(dǎo)航.
-
常用的有三種方法 push replace go (back,forward(go方法相當(dāng)于這兩種方法.))
-
首先添加一個(gè)點(diǎn)擊事件
<span @click="go('/son3')">son3</span> -
可以接受字符串/對(duì)象/的傳參
go(path){ console.log(this) this.$router.push(path) this.$router.push({path:path}) this.$router.push({name:'起的名字'}) } } -
三種方法的不同
- push每次跳轉(zhuǎn).地址都會(huì)保存到地址棧中,所以可以一級(jí)一級(jí)的返回
- replace 返回會(huì)直接返回到最初的頁面
- go(可以跟數(shù)字來指定回退幾步)
-
-
路由傳參
切換組件的時(shí)候給目標(biāo)組件傳一個(gè)參數(shù)
切換的時(shí)候傳遞參數(shù)
-
切換完畢 在目標(biāo)組件接受參數(shù)
-
動(dòng)態(tài)路由
- 傳參
- 路徑中有最少一項(xiàng)是變量(這個(gè)變量可以是任何數(shù)據(jù))
- 在地址欄中必須要輸入/son2/任意數(shù)據(jù)/任意數(shù)據(jù)..這樣的格式才能訪問組件
- 路徑中有最少一項(xiàng)是變量(這個(gè)變量可以是任何數(shù)據(jù))
{ path:'/son2/:hehe/:xixi',//同上 component:son2 },- 接受參數(shù)
- 在目標(biāo)組件中(如上圖代碼就是在son2組件中)通過this.$route.params來接受數(shù)據(jù)
- 傳參
-
query傳參
-
傳參
相當(dāng)于get傳遞參數(shù).
數(shù)據(jù)會(huì)出現(xiàn)在地址欄上,缺少安全性
-
數(shù)據(jù)有長(zhǎng)度限制
this.$router.push('/name:us-123&ps=123') this.$router.push({path:'/name',query:{us:123,ps:134}})
-
接受數(shù)據(jù)
- 在目標(biāo)組件里通過this.$router.query()進(jìn)行接受
-
-
params傳參
-
傳參
不會(huì)出現(xiàn)地址欄上,\
沒有長(zhǎng)度限制
-
不能和path一起使用
this.$router.push({name:'hehe',params:{us:123,ps:123}})
-
接收
- 在目標(biāo)組件里通過this.$router.param()進(jìn)行接受
-
-
嵌套路由又稱子路由
在一個(gè)路由組件里嵌套別的路由
-
在路由注冊(cè)表下需要嵌套的組件中使用children屬性
- 注意不用加'/'
{ path:'/my', component:My, children:[ { path:'userinfo', component:UserInfo }, { path:'userlogin', component:UserLogin } ] }, -
在my.vue中使用二級(jí)路由
<router-view></router-view>
導(dǎo)航守衛(wèi)(路由攔截器)
就是切換組件路由時(shí)起到一個(gè)攔截作用,可以先判斷下是否符合某些條件在決定是否切換
某些頁面登錄之后才能訪問,沒有登錄不能訪問
完整的導(dǎo)航解析流程
- 導(dǎo)航被觸發(fā)。
- 在失活的組件里調(diào)用離開守衛(wèi)先较。
- 調(diào)用全局的
beforeEach守衛(wèi)敞恋。 - 在重用的組件里調(diào)用
beforeRouteUpdate守衛(wèi) (2.2+)瘸右。 - 在路由配置里調(diào)用
beforeEnter顶瞒。 - 解析異步路由組件。
- 在被激活的組件里調(diào)用
beforeRouteEnter话浇。 - 調(diào)用全局的
beforeResolve守衛(wèi) (2.5+)挽鞠。 - 導(dǎo)航被確認(rèn)。
- 調(diào)用全局的
afterEach鉤子漏隐。 - 觸發(fā) DOM 更新喧半。
- 用創(chuàng)建好的實(shí)例調(diào)用
beforeRouteEnter守衛(wèi)中傳給next的回調(diào)函數(shù)。
全局前置守衛(wèi)
不管哪個(gè)路由發(fā)生改變都可以觸發(fā)全局前置守衛(wèi)
在路由創(chuàng)建表中(自己另起一行)
-
三個(gè)參數(shù)
- to 到哪去 想要切換哪個(gè)組件
- from 從哪來 從哪個(gè)組件切換過來的
- next 是否允許切換
- 后面可以跟一個(gè)組件路徑.指定切換到指定的組件
router.beforeEach((to, from, next) => { console.log(from)//從哪而來 console.log(to)//到哪去 let islogin = true; if(to.path==='/singer'){ if(islogin){ next() }else{ next('/my/userlogin') } }else{ next() //可以去 } })
路由獨(dú)享的守衛(wèi)(局部攔截器)
語法和全局守衛(wèi)一樣,只是定義為位置不一樣.
-
在哪個(gè)組件配置里定義的就在那個(gè)組件有效
{ path:'/singer', component:Singer, beforeEnter: (to, from, next) => { console.log('什么么') next() } },
全局后置鉤子
-
組件跳轉(zhuǎn)完成之后觸發(fā)
router.afterEach((to, from) => { })
全局解析守衛(wèi)
- 和全局前置守衛(wèi)用法是一樣的.只是調(diào)用的時(shí)間不一樣
組件內(nèi)置守衛(wèi)
直接修改動(dòng)態(tài)導(dǎo)航時(shí)不會(huì)已引起組件的重新創(chuàng)建 組件是復(fù)用的
組件內(nèi)的守衛(wèi)
beforeRouterEnter 進(jìn)入組件之前
beforeRouterUpdate
當(dāng)前組件路由發(fā)生修改
動(dòng)態(tài)導(dǎo)航修改組件復(fù)用不會(huì)重新創(chuàng)建銷毀
監(jiān)聽路由發(fā)生改變
beforeRouterLeave 組件離開的時(shí)候觸發(fā)
