鍍金池/ 問答/Java  Linux  HTML/ vue多頁面如何重定向？

vue多頁面如何重定向？

問題描述

我們用vue做了多頁面，現(xiàn)在訪問頁面，必須輸入到域名:/views/login.html#/才能訪問到指定網(wǎng)頁，現(xiàn)在想只輸入域名就重定向到login頁面。
這種路由vue多頁能在前端解決嗎？
我的思路是，vue-router只能解決到html那一級之后的路由問題，無法解決到前面的攔截，可以利用nginx來做重定向。

Vue單頁

整個工程只有一個index.html和main.js，通過webpack打包自后的main.js是頁面的入口文件，在main.js中，我們會看到如下代碼：

new Vue({
  store,
  router,
  render: h => h(App)
}).$mount('#app-box')

通過main.js我們新建的vue中有我們定義的router，在router中是我們自己定義的路由表，也就是一樓中的大部分內(nèi)容。所以在我的理解當(dāng)中，程序先進入main.js之后，才具有的單頁面路由功能。

Vue多頁

Vue多頁的項目結(jié)構(gòu)

因為存在多個html和對應(yīng)的js，目前在各個單頁內(nèi)的路由功能是可以實現(xiàn)的，我期待在進入html之前就能，完成路由轉(zhuǎn)發(fā)，也就是在描述中的過程。

回答
編輯回答
傲嬌范

今天剛好遇到了這個問題。
沒找到什么好的辦法，暫時直接用原生js解決了

router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) {
    if (localStorage.getItem('token')) {
      next()
    } else {
      window.location.href = 'index.html#/login'
    }
  } else {
    next()
  }
})
2017年8月22日 11:39
編輯回答
乖乖噠

我的方案吧login提出來，之前l(fā)ogin是單獨的html頁面，現(xiàn)在把他做成vue組件，然后前端路由

2018年2月26日 00:55
編輯回答
溫衫

路由重定向，vue 如何不能呢？譬如像這樣：

export default [
  {
    path: '/login',
    meta: {
      title: '登錄',
      ignoreAuth: true
    },
    component: resolve => require(['../views/Login'], resolve)
  },
  {
    path: '/',
    redirect: '/login'
  },
  {
    path: '*',
    meta: {
      title: '頁面未找到',
      ignoreAuth: true
    },
    component: NotFound
  }
]

或者在路由切換時候，判斷是否處于登錄態(tài)，如否，都轉(zhuǎn)移至login，(偽)代碼如下所示:

router.beforeEach((to, from, next) => {
    authCheck().then(result => {
        if (result) {
            return next()
        } else {
            router.push('/login')
        }
    })
})

參見： vue-boilerplate-template

2017年3月19日 21:24