[toc]
前端框架—Vue路由router
1. 场景模拟
一个页面，包含登录和注册，点击不同按钮，实现登录和注册页切换：
1.1.编写父组件
入口：index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <div id="app">
<span>登录</span>
<span>注册</span>
<hr/>
<div>
登录页/注册页
</div>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app"
})
</script>
|
1.2 编写登录及注册组件
接下来我们来实现登录组件，以前我们都是写在一个文件中，但是为了复用性，开发中都会把组件放入独立的JS文件中，我们新建一个user目录以及login.js及register.js- 编写组件，这里我们只写模板，不写功能。
login.js内容
1
2
3
4
5
6
7
| const loginForm ={
template:' <div>\n' +
' <h2>登录页</h2>\n' +
' 用 户 名：<input type="text"><br/>\n' +
' 密  码：<input type="text"> <br/>\n' +
' </div>'
};
|
register.js内容
1
2
3
4
5
6
7
8
| const registerForm ={
template:' <div>\n' +
' <h2>注册页</h2>\n' +
' 用 户 名：<input type="text"><br/>\n' +
' 密  码：<input type="text"> <br/>\n' +
' 确认密码：<input type="text">\n' +
' </div>'
};
|
1.3 在父组件中引用
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<script src="../node_modules/vue/dist/vue.js"></script>
<script src="login.js"></script>
<script src="register.js"></script>
</head>
<body>
<div id="app">
<login-form></login-form>
<register-form></register-form>
</div>
</body>
<script>
var vue = new Vue({
el: "#app",
data: {
num:0
},
methods: {
},
components:{
loginForm:loginForm,
registerForm:registerForm
}
});
</script>
</html>
|
效果：
1.4 存在的问题
我们期待的是，当点击登录或注册按钮，分别显示登录页或注册页，而不是一起显示。但是，如何才能动态加载组件，实现组件切换呢？虽然使用原生的html5和js也能实现，但是官方推荐我们使用vue-router模块。
2. vue-router简介和安装
使用vue-router和vue可以非常方便的实现 复杂单页应用的动态路由功能。
官网：https://router.vuejs.org/zh-cn/
使用npm安装：npm install vue-router --save
1
2
|
<script src="../node_modules/vue-router/dist/vue-router.js"></script>
|
3. vue-router快速入门
新建vue-router对象，并且指定路由规则：
- 创建VueRouter对象，并指定路由参数
routes：路由规则的数组，可以指定多个对象，每个对象是一条路由规则，包含以下属性：
- ==path：路由的路径==
- ==component：组件名称==
1
2
3
4
5
6
7
8
9
10
11
12
13
|
const router = new VueRouter({
routes:[
{
path:"/login",
component:loginForm
},
{
path:"/register",
component:registerForm
}
]
})
|
3.1 在父组件中引入router对象
1
2
3
4
5
6
7
8
| var vue = new Vue({
el:"#app",
components:{
loginForm,
registerForm
},
router:router
})
|
3.2 页面跳转控制
- 通过
<router-view>来指定一个锚点，当路由的路径匹配时，vue-router会自动把对应组件放到锚点位置进行渲染
- 通过
<router-link>指定一个跳转链接，当点击时，会触发vue-router的路由功能，路径中的hash值会随之改变
1
2
3
4
5
6
7
8
9
10
| <div id="app">
<span><router-link to="/login">登录</router-link></span>
<span><router-link to="/register">注册</router-link></span>
<hr/>
<div>
<router-view></router-view>
</div>
</div>
|
3.3 效果
注意：单页应用中，页面的切换并不是页面的跳转。仅仅是地址最后的hash值变化。
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>router</title>
<script src="../node_modules/vue/dist/vue.js"></script>
<script src="../node_modules/vue-router/dist/vue-router.js"></script>
<script src="login.js"></script>
<script src="register.js"></script>
</head>
<body>
<div id="app">
<span><router-link to="/login">登录</router-link></span>
<span><router-link to="/register">注册</router-link></span>
<hr/>
<router-view></router-view>
</div>
</body>
<script>
const router = new VueRouter({
routes:[
{
path:"/login",
component:loginForm
},
{
path:"/register",
component:registerForm
}
]
});
var vue = new Vue({
el: "#app",
data: {},
methods: {},
router:router,
});
</script>
</html>
|
4. vue-router案例
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p>
<router-link to="/">首页</router-link>
<router-link to="/student">会员管理</router-link>
<router-link to="/teacher">讲师管理</router-link>
</p>
<router-view></router-view>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script src="../node_modules/vue-router/dist/vue-router.js"></script>
<script>
const Welcome = { template: '<div>欢迎</div>' }
const Student = { template: '<div>student list</div>' }
const Teacher = { template: '<div>teacher list</div>' }
const routes = [
{ path: '/', redirect: '/welcome' },
{ path: '/welcome', component: Welcome },
{ path: '/student', component: Student },
{ path: '/teacher', component: Teacher }
]
const router = new VueRouter({
routes
})
const app = new Vue({
el: '#app',
router
})
</script>
</body>
</html>
|
☆
