Vue集成vue-router实现页面跳转出现的问题

1、配置router文件夹下index.js，配置方式一

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const routes = [
  {
    path: '/',    // 首页
    name: 'home',
    component: resolve => {
      require(['@/views/frontpages/Index'], resolve)
    }
  },
  {
    path: '/login',    // 登录页
    name: 'Login',
    component: resolve => {
      require(['@/views/background/Login'], resolve)
    }
  }
]
const router = new Router({
  routes
})
export default router

配置方式二、

routes.js

// 路由配置
export default[
  {
    path: '/',
    name: 'home',
    component: resolve => {
      require(['@/views/frontpages/Index'], resolve)
    }
  },
  {
    path: '/login',
    name: 'Login',
    component: resolve => {
      require(['@/views/background/Login'], resolve)
    }
  }
]

index.js

import Vue from 'vue'
import Router from 'vue-router'
import routes from '@/router/routes'

Vue.use(Router)

// 路由配置
const RouterConfig = {
  // mode: 'history',
  routes
}

const router = new Router(RouterConfig)
export default router

2、写好页面之后访问启动后显示的路径，页面将会跳转到配置的path: "/"路径

点击按钮触发页面跳转，首页跳转方式,由首页跳转到登录页

<Button type="primary" @click="go">去登录页</Button>
<script>
    methods: {
      go () {
        this.$router.push('/login')
      }
    }
</script>

如果直接通过访问路径访问（localhost:8080/login） 访问将失败，在这里进坑了，在坑里待了很久