安裝和使用vue-router
步驟一: 安裝vue-router
npm install vue-router --save
步驟二: 在模塊化工程中使用它(因為是一個插件, 所以可以通過Vue.use()來安裝路由功能)
第一步：導入路由對象，并且調用 Vue.use(VueRouter)
第二步：創(chuàng)建路由實例，并且傳入路由映射配置
第三步：在Vue實例中掛載創(chuàng)建的路由實例
使用vue-router的步驟:
第一步: 創(chuàng)建路由組件
第二步: 配置路由映射: 組件和路徑映射關系
第三步: 使用路由: 通過<router-link>和<router-view>
import Vue from ‘vue’
import VueRouter from ‘vue-router’
Vue.use(VueRouter)
如圖
創(chuàng)建router實例
掛載到Vue實例中
步驟一創(chuàng)建路由組件
第二步: 配置路由映射: 組件和路徑映射關系
第三步: 使用路由: 通過<router-link>和<router-view>
補充路由重定向
{
path:'',
redirect:'/home'
},
默認情況下, 路徑的改變使用的URL的hash.
如果希望使用HTML5的history模式, 非常簡單, 進行如下配置即可:
const router = new VueRouter({
routes,
mode:'history'
})
router-link補充
在前面的<router-link>中, 我們只是使用了一個屬性: to, 用于指定跳轉的路徑.
<router-link>還有一些其他屬性:
tag: tag可以指定<router-link>之后渲染成什么組件, 比如上面的代碼會被渲染成一個<li>元素, 而不是
<router-link to='/home' tag='li'>
replace: replace不會留下history記錄, 所以指定replace的情況下, 后退鍵返回不能返回到上一個頁面中
active-class: 當<router-link>對應的路由匹配成功時, 會自動給當前元素設置一個router-link-active的class, 設置active-class可以修改默認的名稱.
在進行高亮顯示的導航菜單或者底部tabbar時, 會使用到該類.
但是通常不會修改類的屬性, 會直接使用默認的router-link-active即可.
修改linkActiveClass
該class具體的名稱也可以通過router實例的屬性進行修改
路由代碼跳轉
有時候, 頁面的跳轉可能需要執(zhí)行對應的JavaScript代碼, 這個時候, 就可以使用第二種跳轉方式了
比如, 我們將代碼修改如下:
this.$router.push('路徑')
動態(tài)路由
在某些情況下蹈丸，一個頁面的path路徑可能是不確定的，比如我們進入用戶界面時宋梧，希望是如下的路徑：
/user/aaaa或/user/bbbb
除了有前面的/user之外复唤，后面還跟上了用戶的ID
這種path和Component的匹配關系，我們稱之為動態(tài)路由(也是路由傳遞數(shù)據(jù)的一種方式)
路由的懶加載
認識路由的懶加載
首先, 我們知道路由中通常會定義很多不同的頁面.
這個頁面最后被打包在哪里呢? 一般情況下, 是放在一個js文件中.
但是, 頁面這么多放在一個js文件中, 必然會造成這個頁面非常的大.
如果我們一次性從服務器請求下來這個頁面, 可能需要花費一定的時間, 甚至用戶的電腦上還出現(xiàn)了短暫空白的情況.
如何避免這種情況呢? 使用路由懶加載就可以了.
路由懶加載做了什么?
路由懶加載的主要作用就是將路由對應的組件打包成一個個的js代碼塊.
只有在這個路由被訪問到的時候, 才加載對應的組件
懶加載的方式
const Home = () => import('../views/home/Home')
const Shopcart = () => import('../views/shopcart/Shopcart')
路由嵌套
嵌套路由是一個很常見的功能
比如在home頁面中, 我們希望通過/home/news和/home/message訪問一些內容.
一個路徑映射一個組件, 訪問這兩個路徑也會分別渲染兩個組件.
{
path:'/home',
component:Home,
children:[
{
path:'news',
component:News,
},
{
path:'message',
component:Message,
},
],
},
嵌套默認路徑
路由傳參傳遞參數(shù)的方式
傳遞參數(shù)主要有兩種類型: params和query
params的類型:
傳遞的方式: 在path后面跟上對應的值
path配置路由格式: /router/:id
在router-link 屬性to后跟 /123
傳遞后形成的路徑: /router/123, /router/abc
query的類型: 直接在router-link 屬性to后跟查詢字符串模式
?id=123&name='sss'不用修改path
傳遞的方式: 對象中使用query的key作為傳遞方式
傳遞后形成的路徑: /router?id=123, /router?id=abc
獲取參數(shù)
this.$route.params
this.$route.query
<router-link>方式
傳遞參數(shù)方式二: JavaScript代碼
注意
$route和$router是有區(qū)別的
$router為VueRouter實例，想要導航到不同URL隘庄，則使用router.push方法
$route為當前router跳轉對象里面可以獲取name、path磷账、query峭沦、params等
導航守衛(wèi)
什么是導航守衛(wèi)?
vue-router提供的導航守衛(wèi)主要用來監(jiān)聽監(jiān)聽路由的進入和離開的.
1.全局前置守衛(wèi)
使用 router.beforeEach 注冊一個全局前置守衛(wèi)：
router.beforeEach((to, from, next) => {
// ...要做的事情
next()
})
確保要調用 next 方法，否則鉤子就不會被 resolved逃糟。
2全局后置守衛(wèi) 不會接受 next 函數(shù)也不會改變導航本身：
router.afterEach((to, from) => {
// ...
//不需要next()
})
3路由獨享的守衛(wèi)
你可以在路由配置上直接定義 beforeEnter 守衛(wèi)：
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
這些守衛(wèi)與全局前置守衛(wèi)的方法參數(shù)是一樣的
導航守衛(wèi)補充
https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#全局前置守衛(wèi)
keep-alive遇見vue-router
keep-alive 是 Vue 內置的一個組件吼鱼，可以使被包含的組件保留狀態(tài)蓬豁，或避免重新渲染。
它們有兩個非常重要的屬性:
include - 字符串或正則表達菇肃，只有匹配的組件會被緩存
exclude - 字符串或正則表達式地粪，任何匹配的組件都不會被緩存
router-view 也是一個組件，如果直接被包在 keep-alive 里面琐谤，所有路徑匹配到的視圖組件都會被緩存：
