<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<router-link to='/music'>音乐</router-link>
<router-link to='/movie'>电影</router-link>
<router-link to='/new'>新闻</router-link>
<router-view></router-view>
</div>
</body>
<template id="music">
<ul>
<li>
<router-link to="/popmusic">流行音乐</router-link>
</li>
<li>
<router-link to="/ethnicmusic">名族音乐</router-link>
</li>
<li>
<router-link to="/classicalmusic">古典音乐</router-link>
</li>
<br>
<router-view></router-view>
</ul>
</template>
<template id="movie">
<ul>
<li>
<router-link to="/lovemovie">爱情电影</router-link>
</li>
<li>
<router-link to="/comedymovies">喜剧电影</router-link>
</li>
<li>
<router-link to="/actionmovies">动作电影</router-link>
</li>
<br>
<router-view></router-view>
</ul>
</template>
<script>
const Music = { template: '#music' }
const Movie = { template: '#movie' }
const New = { template: '<div>新闻内容</div>' }
const Popmusic = { template: '<div>流行音乐内容</div>' }
const Ethnicmusic = { template: '<div>名族音乐内容</div>' }
const Classicalmusic = { template: '<div>古典音乐内容</div>' }
const Lovemovie = { template: '<div>爱情电影内容</div>' }
const Comedymovies = { template: '<div>喜剧电影内容</div>' }
const Actionmovies = { template: '<div>动作电影内容</div>' }
var router = new VueRouter({
routes: [
{
path: '/music',
name: 'music',
component: Music,
children: [
{
path: '/popmusic',
name: 'popmusic',
component: Popmusic,
},
{
path: '/ethnicmusic',
name: 'ethnicmusic',
component: Ethnicmusic,
},
{
path: '/classicalmusic',
name: 'classicalmusic',
component: Classicalmusic,
}
]
},
{
path: '/movie',
name: 'movie',
component: Movie,
children: [
{
path: '/lovemovie',
name: 'lovemovie',
component: Lovemovie,
},
{
path: '/comedymovies',
name: 'comedymovies',
component: Comedymovies,
},
{
path: '/actionmovies',
name: 'actionmovies',
component: Actionmovies,
}
]
},
{
path: '/new',
name: 'new',
component: New,
}
]
})
var vm = new Vue({
el: '#app',
router
})
</script>
<style>
</style>
</html>