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） 訪問將失敗，在這裡進坑了，在坑裡待了很久