<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-router之命名视图的实例</title>
<script src="vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>
</head>
<body>
<style>
.news {
200px;
float: left;
border: 1px #188eee solid;
}
.slide {
200px;
float: left;
border: 1px #000 solid;
}
</style>
<div id="demo">
<router-view></router-view>
<router-view class="news" name="news"></router-view>
<router-view class="slide" name="slide"></router-view>
</div>
<script type="text/x-template" id="menu">
<div>
<a href="http://www.baidu.com">百度一下</a>
<a href="http://www.baidu.com">知天下</a>
</div>
</script>
<script type="text/x-template" id="news">
<div>
<li v-for="v in newss">{{v.title}}</li>
</div>
</script>
<script type="text/x-template" id="slide">
<div>
<li v-for="v in datas">{{v.title}}</li>
</div>
</script>
<script type="text/javascript">
const menu = {
template: "#menu"
}
const news = {
template: "#news",
data() {
return {
newss: [
{title: '测试一'},
{title: '测试二'},
]
}
}
}
const slide = {
template: "#slide",
data() {
return {
datas: [
{title: '测试三'},
{title: '测试四'},
]
}
}
}
var routes = [
{
path: '/', components: {
default: menu,
news: news,
slide: slide
}
}
]
var router = new VueRouter({routes});
new Vue({
el: "#demo",
router
});
</script>
</body>
</html>