使用vue-router

安装

vue-cli 2.x npm install vue-router --save

vue-cli 3.x vue add router

目录

1
2
3
4
5
6
7
8
9
|-- ~/
|-- router
|-- news
|- index.js
|-- product
|-- index.js
|-- index.js
|-- main.js
|-- ~

/main.js

1
2
3
4
5
6
7
8
9
import App from './App.vue'
import router from './router'

// ...

new Vue({
router,
render: h => h(App)
}).$mount('#app')

/router/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import Vue from 'vue'
import Router from 'vue-router'

import News from './news'
import Product from './product'

Vue.use(Router)

// 全局导航守卫
let whiteList = ['/login', '/404']
let TOKEN = true
router.beforeEach((to, from, next) => {
if (whiteList.includes(to.path)) {
next()
} else if (!TOKEN) {
next({path: '/404'})
} else {
next()
}
})

const router = new Router([
routes: [
...News,
...Product
]
])

export default router

/router/news/index.js

1
2
3
4
5
6
7
8
9
import News from '@/views/news'

export default [
{
path: '/news',
name: 'news',
component: News
}
]

路由懒加载 - 在访问的时候加载组件

修改 router/news/index.js

1
2
3
4
5
6
7
8
9
10
// import News from '@/views/news'
const News () => improt('@/views/news')

export default [
{
path: '/news',
name: 'news',
component: News
}
]

vue-router 官方文档

其他参考:vue中的懒加载和按需加载