登录后复制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<!-- 1引入插件的js -->
<!-- 2设置链接 -->
<!-- 3设立容器部分 -->
<!-- 4提供要渲染的组件 -->
<!-- 5配置路由 -->
<!-- 6挂载路由 -->
<body>
<div id="app">
<!-- 按钮 -->
<!-- <ul>
<li><a href="#/aaa">aaa</a></li>
<li><a href="#/bbb">bbb</a></li>
<li><a href="#/ccc">ccc</a></li>
<li><a href="#/ddd">ddd</a></li>
</ul> -->
<router-link to="/aaa">AAA</router-link>
<router-link to="/bbb">BBB</router-link>
<router-link to="/ccc">CCC</router-link>
<router-link to="/ddd">DDD</router-link>
<!-- <div id="container">
</div> -->
<router-view></router-view>
</div>
<script src="./js/vue.js"></script>
<script src="./js/vuerouter.js"></script>
<script>
//获取不同的值
//hash变化的时候触发该事件
/* var div = document.getElementById('container');
window.onhashchange = function() {
console.log("-----");
var hash = location.hash;
console.log(hash);
hash = hash.replace("#", '');
switch (hash) {
case '/aaa':
div.innerHTML = "AAA";
break;
}
} */
//提供渲染组件
var comA = {
template: `<div>AAA</div>`
}
var comB = {
template: `<div>BBB</div>`
}
var comC = {
template: `<div>CCC</div>`
}
var comD = {
template: `<div>DDD</div>`
}
//实例化路由
var router = new VueRouter({
routes: [{
path: '/aaa',
component: comA
}, {
path: '/bbb',
component: comB
}, {
path: '/ccc',
component: comC
}, {
path: '/ddd',
component: comD
}, ]
})
new Vue({
el: '#app',
//挂载使用对象
router
})
</script>
</body>
</html>
