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) 訪問將失敗,在這裏進坑了,在坑裏待了很久