<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>
<style>
.router-link-active {
font-size: 20px;
color: red;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li>
<router-link to='/home'>主页</router-link>
</li>
<li>
<router-link to='/news'>新闻</router-link>
</li>
</ul>
<!--路由配置的组件将会渲染在这里-->
<div>
<router-view></router-view>
</div>
</div>
<template id="home">
<h3>我是主页</h3>
<div>
<ul>
<li>
<router-link to='/home/login'>登陆</router-link>
</li>
<li>
<router-link to='/home/resgist'>注册</router-link>
</li>
</ul>
</div>
<h2>{{$route.params.id}}</h2>
<div>
<router-view></router-view>
</div>
</template>
<template id="news">
<div>
<h3>我是新闻</h3>
<ul>
<li>
<router-link to='/news/detail'>详细</router-link>
</li>
</ul>
</div>
<div>
<router-view></router-view>
</div>
</template>
<template id="login">
<div>
<p>请登录</p>
</div>
<div>
<router-view></router-view>
</div>
</template>
<template id="resgist">
<div>
<p>请注册</p>
</div>
<div>
<router-view></router-view>
</div>
</template>
<template id="detail">
<div>
<!-- <h2>Details:{{$route.params.id}}</h2>-->
</div>
<div>
<router-view></router-view>
</div>
</template>
</body>
<script>
var Home = {
template: '#home'
};
var News = {
template: '#news'
};
var Login = {
template: '#login'
}
var Resgist = {
template: '#resgist'
}
var Detail = {
template: '#detail'
}
//创建router实例
var router = new VueRouter({
routes: [
{
path: '/home/:id', component: Home,
children: [
{path: 'login', component: Login},
{path: 'resgist', component: Resgist}
]
},
{
path: '/news/:id', component: News, children: [
{path: 'detail', component: Detail}
]
}
]
});
//创建和挂载根实例
var app = new Vue({
router: router
}).$mount('#box');
</script>
</html>