总结:
- 导入 vue-router
- 创建router 实例对象,并配置 path 和 需要匹配的组建
- 创建组建模板对象
- 让 router 实例对象 和vue 实例对象进行绑定 , 监控URL的变化,并展示路由
- 使用占位符 router-view 标签 ,用于展示用的
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script src='../../lib/vue-2.4.0.js'></script>
<script src='../../vue-router-3.0.1.js'></script>
</head>
<body>
<div id="pp">
<!-- 创建两个button, 并通过href 找到相应组建的路由 -->
<a href="#/login">登录</a>
<a href="#/registe">注册</a>
<!-- 用于显示路由组建,是一个占位符 ,展示用的 -->
<router-view></router-view>
</div>
<script>
// 创建两个组建模板对象,让路由能找到并显示这个组件
var tmp1={
template:'<h1>登录</h1>',
}
var tmp2={
template:'<h1>注册</h1>',
}
// 创建路由对象,并设置路由的参数 ,第一个是path, 第二个是 要匹配的组建
var routerObj=new VueRouter({
routes:[
{path:'/login',component:tmp1},
{path:'/registe',component:tmp2}
]
})
new Vue({
el:'#pp',
data:{
},
methods:{
},
// 让路由对象 和vue 实例 绑定关系, 用于监听。
router: routerObj,
})
</script>
</body>
</html>