1、引入相关的库文件
2、添加路由连接 Router-Link
3、添加路由占位符 Router-View
4、定义路由组件
5、创建路由实例并配置路由规则
6、将路由实例挂载到vue根组件中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<!-- 导入 vue 文件 ,这两个文件引入顺序不能颠倒-->
<script src="./lib/vue_2.5.22.js"></script>
<script src="./lib/vue-router_3.0.2.js"></script>
</head>
<body>
<!-- 被 vm 实例所控制的区域 -->
<div id="app">
<!-- to属性默认会被渲染为href属性 -->
<!-- to属性的值会被默认渲染为#开头的hash地址 -->
<!-- 添加路由连接 -->
<router-link to="/user">User</router-link>
<router-link to="/Register">Register</router-link>
<!-- 路由占位符也称路由填充位 -->
<!-- 作用:将来通过路由规则匹配到的组件,将会被渲染到router-view所在的位置 -->
<router-view></router-view>
</div>
<script>
// 定义路由组件
const User = {
template: '<h1>User 组件</h1>'
}
const Register = {
template: '<h1>Register 组件</h1>'
}
// 创建路由实例对象
const router = new VueRouter({
// 所有的路由规则
// routes是路由规则数组(以下表示定义了两个路由规则)
routes: [{
// path表示当前路由规则匹配的hash地址,一一对应之前写的to属性里的地址
path: '/user',
// component 表示当前路由规则对应要展示的组件
component: User
}, {
path: '/register',
component: Register
}]
})
// 创建 vm 实例对象
const vm = new Vue({
// 指定控制的区域
el: '#app',
data: {},
// 挂载路由实例对象
// router: router
router
})
// 让vue实例控制网页中的某个区域的过程,称之为挂载
// 挂载方式:
// (1)、通过 el:"css选择器" 进行配置 el:"#app"
// (2)、通过vue实例.$mount(“css选择器”) 进行配置
</script>
</body>
</html>