vuecli3.0项目启动路由配置路由跳转的问题？不知道是思路错了还是哪里配置错了！谢谢大家了

Question

问题描述
现在想要实现的场景如下：
本地npm run serve 启动项目之后 浏览器默认打开端口 指向登录页login.vue 然后用户输入账号密码之后成功跳转到Market.vue 要在本地开发环境下 完成登录跳转这一个过程

方法1：
直接配置入口文件，让项目的npm run serve 之后打开login.vue页面，然后输入账号密码跳转到Market下

此时遇到的问题：
1.npm run serve 之后可以打开登录页面，但是始终无法完成跳转

登录页如下

router.js配置如下

vue.config.js配置如下

account.js配置如下

account.html配置如下

手动访问 http://localhost:8085/#/Market 也是无法访问到的 不知道如何设置跳转

方法2

设置入口文件为index.js npm run serve之后直接跳转Market.vue 在Market.vue里面用路由钩子设置一个变量模拟token ture就进入Market.vue 否则就跳转到登录页

问题：

跳转之后 成了这样

router.js配置如下

vue.config.js配置如下

index.js

想要在本地实现一个登陆跳转的场景 应该通过两个方法怎么配置 求教大家！！ 希望能给出两个方案的解决方法 谢谢了

Answer 1

麻烦大神路过看下

Answer 2

你看哈 方案1的时候你打包成了 两个静态文件：index.html 一个是 account.html 当你用http://localhost:8085/#/Market 访问的是index.html的market路由，你想访问account.html应该是这个路径 http://localhost:8085/account.html 或者你在vue.config.js 里面的devServer配置一下：

historyApiFallback:{
    rewrites:[
        {from:/^\/Market/,to:'/index.html'},
        {from:/.*/,to:'/account.html'}
    ]
}

Answer 3

单页面还是多页面？单页面可以参照下面的形式去做，多页面暂时不了解

路由index.js

const router = new Router({
    routes: [
        {
            path: '/',
            redirect: '/market'
        },
        {
            name: 'Market',
            path: '/market',
            component: () => import('@/market/market.vue'),
            meta: {
                login: true//配置login字段为true，说明该页面是需要登陆的
            }
        },
        {
            name: 'Login',
            path: '/login',
            component: () => import('@/login/login.vue')
        }
        //其他路由
    ]
})

router.beforeEach((to, from, next) => {
  //此处获取用户信息，可以用你自己的方式获取登陆后用户信息
  const userInfo = localStorage.userInfo
  //判断是否存在用户信息、或者该页面是否需要登陆
  if (userInfo || !to.meta.login ) {
    //如果能获取到用户信息，说明用户登陆了，或者该页面不需要登陆也能进入就直接放行进入该页面
    next()
  } else {
    //否则的跳转到登陆页面，并且带上当前页面的地址，用于登陆后重新跳回来
    next({
      name: 'Login',
      query: {
        redirect: to.fullPath//当前页面的地址
      }
    })
  }

})

export default router

Login页面

methods: {
    //登陆的方法
    toLogin(){
        //你的一些其他校验及其他操作，如用户名密码不能为空之类的
        
        //获取回跳的redirect地址
        const redirect = this.$route.query.redirect
        if(redirect){
            //如果回跳地址存在，登陆后跳转到该地址，就是回跳
            this.$router.push(redirect)
        }else {
            //否则跳转到默认的页面，首页或者其他页面
            this.$router.push('/')
        }
    }
}

这样就成了你想要的了，启动项目后是到/market这个地址，由于这个页面做了meta配置，需要登陆，所以会跳到login页面/login?redirect=%2Fmarket,%2F是/的转义，点击登陆后因为存在redirect，所以就会重新回跳到页面/market