# 47.Vue Router的使用步骤(★★★)
# 1.引入相关的库文件
<!-- Vue Router依赖于Vue，所以需要先引入Vue，再引入Vue Router -->
<script src="lib/vue_2.5.22.js"></script>
<script src="lib/vue-router_3.0.2.js"></script>
1
2
3
2
3
# 2.添加路由链接:
<!-- <router-link>是 vue 中提供的标签，默认会被渲染为a标签 -->
<!-- to 属性默认被渲染为href属性 -->
<!-- to 属性的值会被渲染为 # 开头的 hash 地址 -->
<router-link to="/user">User</router-link>
<router-link to="/login">Login</router-link>
1
2
3
4
5
6
2
3
4
5
6
# 3.添加路由填充位（路由占位符）
<!-- 路由填充位 (也叫做路由占位符) -->
<!-- 将来通过路由规则匹配到的组件, 将会被渲染到 router-view 所在的位置 -->
<router-view></router-view>
1
2
3
2
3
4.定义路由组件
var User = {
template:"<div>This is User</div>"
}
var Login = {
template:"<div>This is Login</div>"
}
1
2
3
4
5
6
2
3
4
5
6
5.配置路由规则并创建路由实例(重要)
var myRouter = new VueRouter({
//routes是路由规则数组
routes:[
//每一个路由规则都是一个对象，对象中至少包含path和component两个属性
//path表示 路由匹配的hash地址，component表示路由规则对应要展示的组件对象
{path:"/user",component:User},
{path:"/login",component:Login}
]
})
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 6.将路由挂载到 Vue 根实例中
new Vue({
el:"#app",
data: {
},
//为了能够让路由规则生效, 通过router对象挂载到 vue 实例对象上
router:myRouter
})
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8