【Java】vue多页面如何重定向？

问题描述

我们用vue做了多页面，现在访问页面，必须输入到域名:/views/login.html#/才能访问到指定网页，现在想只输入域名就重定向到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中是我们自己定义的路由表，也就是一楼中的大部分内容。所以在我的理解当中，程序先进入main.js之后，才具有的单页面路由功能。

Vue多页

【Java】vue多页面如何重定向？

因为存在多个html和对应的js，目前在各个单页内的路由功能是可以实现的，我期待在进入html之前就能，完成路由转发，也就是在描述中的过程。

回答

今天刚好遇到了这个问题。
没找到什么好的办法，暂时直接用原生js解决了

router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) {
    if (localStorage.getItem('token')) {
      next()
    } else {
      window.location.href = 'index.html#/login'
    }
  } else {
    next()
  }
})

路由重定向，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
  }
]

或者在路由切换时候，判断是否处于登录态，如否，都转移至login，(伪)代码如下所示:

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

参见： vue-boilerplate-template

我的方案吧login提出来，之前login是单独的html页面，现在把他做成vue组件，然后前端路由

以上是 【Java】vue多页面如何重定向？ 的全部内容， 来源链接： utcz.com/a/90040.html

回到顶部