<!-- 1引入插件的js -->
<!-- 2设置链接 -->
<!-- 3设立容器部分 -->
<!-- 4提供要渲染的组件 -->
<!-- 5配置路由 -->
<!-- 6挂载路由 --><!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挂载路由 --><body><div id="app"><!-- 按钮 --><!-- <ul><li><a href="#/aaa">aaa</a></li><li><a href="#/bbb">bbb</a></li><li><a href="#/ccc">ccc</a></li><li><a href="#/ddd">ddd</a></li></ul> --><router-link to="/aaa">AAA</router-link><router-link to="/bbb">BBB</router-link><router-link to="/ccc">CCC</router-link><router-link to="/ddd">DDD</router-link><!-- <div id="container"></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 comA = {template: `<div>AAA</div>`}var comB = {template: `<div>BBB</div>`}var comC = {template: `<div>CCC</div>`}var comD = {template: `<div>DDD</div>`}//实例化路由var router = new VueRouter({routes: [{path: '/aaa',component: comA}, {path: '/bbb',component: comB}, {path: '/ccc',component: comC}, {path: '/ddd',component: comD}, ]})new Vue({el: '#app',//挂载使用对象router})</script></body></html>运行结果
