鍍金池/ 問(wèn)答/Java  Linux  HTML/ vue多頁(yè)面如何重定向？

vue多頁(yè)面如何重定向？

問(wèn)題描述

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

Vue單頁(yè)

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

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

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

Vue多頁(yè)

Vue多頁(yè)的項(xiàng)目結(jié)構(gòu)

因?yàn)榇嬖诙鄠€(gè)html和對(duì)應(yīng)的js，目前在各個(gè)單頁(yè)內(nèi)的路由功能是可以實(shí)現(xiàn)的，我期待在進(jìn)入html之前就能，完成路由轉(zhuǎn)發(fā)，也就是在描述中的過(guò)程。

回答
編輯回答
傲嬌范

今天剛好遇到了這個(gè)問(wèn)題。
沒(méi)找到什么好的辦法，暫時(shí)直接用原生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ái)，之前l(fā)ogin是單獨(dú)的html頁(yè)面，現(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: '頁(yè)面未找到',
      ignoreAuth: true
    },
    component: NotFound
  }
]

或者在路由切換時(shí)候，判斷是否處于登錄態(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