vue-router 路由的用法（分享頁面的重定向、動態設置title）

動態設置頁面的title

原理：在路由定義的時候在 meta 裏面設置一個 title，而後用路由守衛的鉤子事件動態替換頁面的title。
代碼：

// 定義路由
const route = [
    {path:'/',component:home,meta:{index:0,title:'首頁'}},
    {path:'/issue',component:issue,children:[
        {path:'',component:commonIssue,meta:{title:'常見問題'}},
        {path:'/issues/:id',component:issueDetail,name:'idetails',meta:{title:'常見問題'}}
    ]}
]
// 註冊路由
Vue.use(VueRouter)
const router = new VueRouter({
    routes:routes
})
//單獨設置頁面的 title
router.beforeEach((to, from, next) => {   // beforeEach 是 router 的鉤子函數，在進入路由前執行
  if (to.meta.title) { // 判斷是否有標題
    document.title = to.meta.title;
  }
  next();    // 這個必定不能忘了！否則路由不會跳轉的！  
})

分享頁面的重定向

以前作微信公衆號項目有的這個需求，須要作到只要是用戶分享出去的頁面，都自動跳轉到一個項目介紹頁，避免其餘用戶點進來，由於沒有權限訪問，而出現頁面空白的狀況。
原理也是同樣，經過 vue-router 的鉤子函數，在路由跳轉以前，判斷一下是不是從分享頁面過來的，若是是就重定向到一個通用的分享頁面，若是不是，就正常跳轉。
如何判斷頁面是從微信分享來的？微信會給分享的頁面自動加上一些參數，其中一個‘from=singlemessage/groupmessage/timeline’，表示從好友對話/羣組會話/朋友圈分享過來的，因此判斷一下頁面的 url 上面是否帶有 from 便可。
下面是代碼：

const route = [
    {path:'/',name:''component:home},
    {path:'/',name:'share',component:sharePage},
]

router.beforeEach((to, from, next) => {

  let origin = getQueryString('from');
  if(origin){
    if(to.name=='share'){  // 這個地方是爲了防止頁面死循環
      next();
      return;
    }
    next('/sharePage');
  }else{
    next();
  }
})


    // 這個函數是獲取頁面 url 參數的，通常會封裝到 utils 裏面吧
    function getQueryString(name) { 
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); 
      var r = window.location.search.substr(1).match(reg); 
      if (r != null) return unescape(r[2]); return null; 
    }