<!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>
