<!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>vue-router规则的使用</title>
<script src="./lib/vue.js"></script>
<!-- 1、导入vue-router的包 -->
<script src="./lib/vue-router.js"></script>
</head>
<body>
<div id="app">
<a href="#/dlzj">登陆</a>
<a href="#/zczj">注册</a>
<!-- 6、一定要在页面中进行展示router-view是vue-router提供的占位符 -->
<router-view></router-view>
</div>
<!-- 子组件 -->
<template id="logn">
<div>
<h3>登陆组件</h3>
</div>
</template>
<template id="zhuce">
<div>
<h3>登陆组件</h3>
</div>
</template>
<script>
// 创建几个组件
var dlzj = {
template: '#logn'
}
var zczj = {
template: '#zhuce'
}
// 2、导入包之后，就会在windows对象身上就有一个构造函数，可以new一个实例对象
var routes = new VueRouter({
// routes: 表示一个路由规则对象
// routes表示一个数组，里面可以有多个路由对象 ，每一个路由对象都有两个必写项，path表示监听的路径地址，compontents表示path路由规则匹配的对应的模板对象，这里只接受一个对象，
// 3、在页面中#app中我们需要将组件的模板名字使用<><>包起来使用，在这里我们要使用，一个模板对象，
// 4、vue-router组件都有使用hash来进行组件的切换，不是实际的url地址进行切换的
routes: [
{ path: '/dlzj', component: dlzj },
{ path: '/zczj', component: zczj }
]
})
var vm = new Vue({
el: "#app",
data: {},
methods: {},
//5、将路由注册到页面的实例上去
router: routes
})
</script>
</body>
</html>