如何在vue中使用router 組件

這篇文章將為大家詳細(xì)講解有關(guān)如何在vue中使用router 組件，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

1 動(dòng)態(tài)設(shè)置頁(yè)面標(biāo)題

頁(yè)面標(biāo)題是由 <title></title> 來(lái)控制的，因?yàn)?SPA 只有一個(gè) HTML，所以當(dāng)切換到不同的頁(yè)面時(shí)，標(biāo)題是不會(huì)發(fā)生變化的。必須通過(guò) JavaScript 來(lái)修改 <title></title> 中的內(nèi)容：

window.document.title ='xxx'

有一種思路是在每個(gè)頁(yè)面的 *.vue 的 mounted 鉤子函數(shù)中，通過(guò) JavaScript 來(lái)修改 <title></title> 中的內(nèi)容。這種方式固然可行，但如果頁(yè)面很多，就會(huì)顯著增加維護(hù)成本，而且修改邏輯都是一樣的。有沒(méi)有更好的方法呢？

我們可以利用 vue-router 組件的導(dǎo)航鉤子 beforeEach 函數(shù)，在路由發(fā)生變化時(shí)，統(tǒng)一設(shè)置。

import VueRouter from 'vue-router';
...

//加載 vue-router 插件
Vue.use(VueRouter);

/*定義路由匹配表*/
const Routers = [{
 path: '/index',
 component: (resolve) => require(['./router/views/index.vue'], resolve),
 meta: {
  title: '首頁(yè)'
 }
},
 //一次性加載
 // {
 //  path: '/index',
 //  component: require('./router/views/index.vue')
 // },
 {
  path: '/about',
  component: (resolve) => require(['./router/views/about.vue'], resolve),
  meta: {
   title: '關(guān)于'
  }
 },
 {
  path: '/article/:id',
  component: (resolve) => require(['./router/views/article.vue'], resolve)
 }
 ,
 {//當(dāng)訪問(wèn)的頁(yè)面不存在時(shí)，重定向到首頁(yè)
  path: '*',
  redirect: '/index'
 }
]
//路由配置
const RouterConfig = {
 //使用 HTML5 的 History 路由模式
 mode: 'history',
 routes: Routers
};
//路由實(shí)例
const router = new VueRouter(RouterConfig);
//動(dòng)態(tài)設(shè)置頁(yè)面標(biāo)題
router.beforeEach((to, from, next) => {
 window.document.title = to.meta.title;
 next();
})
new Vue({
 el: '#app',
 router: router,
 render: h => h(Hello)
})

我們?cè)诼酚善ヅ浔碇?，為那些需要?biāo)題的頁(yè)面，配置了 meta title 屬性：

meta: {
  title: 'xxx'
}

然后在 beforeEach 導(dǎo)航鉤子函數(shù)中，從路由對(duì)象中獲取 meta title 屬性，用于標(biāo)題設(shè)置。beforeEach 有三個(gè)入?yún)ⅲ?/p>

參數(shù) 說(shuō)明

效果：

2 長(zhǎng)頁(yè)面跳轉(zhuǎn)自動(dòng)返回頂端

假設(shè)第一個(gè)頁(yè)面較長(zhǎng)，用戶(hù)滾動(dòng)查看到底部，這時(shí)如果又跳轉(zhuǎn)到另一個(gè)頁(yè)面，那么滾動(dòng)條是會(huì)默認(rèn)停在上一個(gè)頁(yè)面的所在位置的。這種場(chǎng)景比較好的設(shè)計(jì)是：跳轉(zhuǎn)后會(huì)自動(dòng)返回頂端。這可以通過(guò) afterEach 鉤子函數(shù)來(lái)實(shí)現(xiàn)，代碼如下：

router.afterEach((to, from, next) => {
 window.scrollTo(0, 0);
});

組合使用 beforeEach 與 afterEach，還可以實(shí)現(xiàn)：從一個(gè)頁(yè)面跳轉(zhuǎn)到另一個(gè)頁(yè)面時(shí)，出現(xiàn) Loading 動(dòng)畫(huà)，當(dāng)新頁(yè)面加載后，再結(jié)束動(dòng)畫(huà)。

3 登陸驗(yàn)證

某些頁(yè)面設(shè)置了權(quán)限，只有賬號(hào)登陸過(guò)，才能訪問(wèn)；否則跳轉(zhuǎn)到登錄頁(yè)。假設(shè)我們使用 localStorage 來(lái)判斷是否登陸。

HTML5 的 localStorage 特性，用于本地存儲(chǔ)。它的出現(xiàn)，解決了 cookie 存儲(chǔ)空間不足的問(wèn)題 cookie 中每條 cookie 的存儲(chǔ)空間只有 4k) ，而 localStorage 中一般是 5M，這在不同的瀏覽器中 大小略有不同 。

router.beforeEach((to, from, next) => {
 if (window.localStorage.getItem('token')) {
  next();
 } else {
  next('/login');
 }
});

next() 入?yún)?，如果?false，會(huì)不導(dǎo)航；如果為路徑，則會(huì)導(dǎo)航到指定路徑下的頁(yè)面。

關(guān)于如何在vue中使用router 組件就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。