如何在vue中使用router組件

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

廣水網(wǎng)站建設公司創(chuàng)新互聯(lián)建站,廣水網(wǎng)站設計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為廣水近千家提供企業(yè)網(wǎng)站建設服務。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站制作要多少錢，請找那個售后服務好的廣水做網(wǎng)站的公司定做！

1 動態(tài)設置頁面標題

頁面標題是由 <title></title> 來控制的，因為 SPA 只有一個 HTML，所以當切換到不同的頁面時，標題是不會發(fā)生變化的。必須通過 JavaScript 來修改 <title></title> 中的內(nèi)容：

window.document.title ='xxx'

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

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

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

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

/*定義路由匹配表*/
const Routers = [{
 path: '/index',
 component: (resolve) => require(['./router/views/index.vue'], resolve),
 meta: {
  title: '首頁'
 }
},
 //一次性加載
 // {
 //  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)
 }
 ,
 {//當訪問的頁面不存在時，重定向到首頁
  path: '*',
  redirect: '/index'
 }
]
//路由配置
const RouterConfig = {
 //使用 HTML5 的 History 路由模式
 mode: 'history',
 routes: Routers
};
//路由實例
const router = new VueRouter(RouterConfig);
//動態(tài)設置頁面標題
router.beforeEach((to, from, next) => {
 window.document.title = to.meta.title;
 next();
})
new Vue({
 el: '#app',
 router: router,
 render: h => h(Hello)
})

我們在路由匹配表中，為那些需要標題的頁面，配置了 meta title 屬性：

meta: {
  title: 'xxx'
}

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

參數(shù) 說明

參數(shù)	說明
to	當前導航，即將要進入的路由對象。
from	當前導航，即將要離開的路由對象。
next	調(diào)用 next() 之后，才會進入下一步。

效果：

2 長頁面跳轉(zhuǎn)自動返回頂端

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

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

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

3 登陸驗證

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

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

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

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

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

網(wǎng)站欄目：如何在vue中使用router組件
本文URL：http://muchs.cn/article46/jpdjhg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、做網(wǎng)站、網(wǎng)站收錄、網(wǎng)頁設計公司、標簽優(yōu)化、電子商務

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)