|
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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
|
// 配置路由信息
import Vue from 'vue'
import VueRouter from 'vue-router'
// import Home from '../components/Home'
// import About from '../components/About'
// import User from '../components/User'
// 懒加载,提高效率（因为app.js文件中集成了所有的业务代码，因此请求事件可能较长
// 通过将app.js分隔，在需要使用某些js代码的时候，才接收其代码）
const Home = () => import('../components/Home')
const HomeNews = () => import('../components/HomeNews')
const HomeMessage = () => import('../components/HomeMessage')
const About = () => import('../components/About')
const User = () => import('../components/User')
const Profile = () => import('../components/Profile')
// 1.通过Vue.use(插件)，安装插件
Vue.use(VueRouter)
// 2.创建VueRouter对象
const routes = [
{
path: '',
// component: Home
// 重定向redirect
redirect: '/home'
},
{
path: '/home',
component: Home,
meta: { title: "首页" },
children: [
{
path: '',
redirect: 'news'
},
{
path: 'news',
// 注意这里是没有s的！！！
component: HomeNews,
},
{
path: 'message',
component: HomeMessage
},
]
},
{
path: '/about',
component: About,
meta: { title: "关于" },
},
{
path: '/user/:userId',
component: User,
meta: { title: "用户" },
},
{
path: '/profile',
component: Profile,
meta: { title: "档案" },
}
]
const router = new VueRouter({
// 配置路由和组件间的映射关系
routes,
mode: 'history',
linkActiveClass: 'active'
})
// 3.将router对象传入到Vue实例中
export default router
// 导航守卫 前置钩子
router.beforeEach((to, from, next) => {
document.title = to.matched[0].meta.title
console.log('+++');
next()
})
// 导航守卫， 后置钩子 不需要调用next函数
router.afterEach((to,from) => {
console.log('----');
})
|
