<!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挂载路由 -->
<style>
li {
list-style: none;
}
a {
text-decoration: none;
}
.container {
height: 100px;
border: 1px solid #ccc;
}
</style>
<body>
<div id="app">
<ul>
<router-link to="/home" tag="li"><a>首页</a></router-link>
<router-link to="/top" tag="li"><a>热点</a></router-link>
<router-link to="/music" tag="li"><a>音乐</a></router-link>
</ul>
<router-view class="container"></router-view>
</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 home = {
template: `<div>home</div>`
}
var Top = {
template: `<div>top</div>`
}
var music = {
template: `<div>
<router-link to="/music/pop" tag="li"><a>流行</a></router-link>
<router-link to="/music/rock" tag="li"><a>摇滚</a></router-link>
<router-link to="/music/cal" tag="li"><a>古典</a></router-link>
<router-view class="container-sub"></router-view>
</div>`
}
var musicSub = {
template: `<div>我是musicSub组件</div>`
}
//实例化路由
var routes = [{
name: 'home',
path: '/home',
component: home
}, {
name: 'top',
path: '/top',
component: Top
}, {
name: 'music',
path: '/music',
component: music,
children: [{
path: '/music/:id',
component: musicSub
}]
}, ]
var router = new VueRouter({
routes
})
new Vue({
el: '#app',
//挂载使用对象
router,
data: {
},
methods: {
}
})
</script>
</body>
</html>
