1.1 Vue Router简介
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，构建单页面应用。
Vue Router支持3种路由模式：
◊ hash：使用URL hash值作为路由，HTML5 History API出现之前，前端路由都通过hash来实现。hash实现需要在URL中加上#，Web服务不会解析hash，自动忽略#后面的内容，JavaScript通过window.location.hash读取解析。
◊ history：依赖HTML5 History API和服务器配置
◊ abstract：支持所有JavaScript运行环境，如node服务器端。如果发现没有浏览器的API，路由就会强制进入该模式。
vue-router提供两个指令标签组件来处理这个导航与自动渲染逻辑：
◊ <router-view>：渲染路径匹配到的组件视图
◊ <router-link>：支持用户在具有路由功能的应用中导航
1.2 Vue Router安装
Vue Router官方网址：https://github.com/vuejs/vue-router
Vue Router文档教程：https://router.vuejs.org/zh/
npm安装VueRouter：
npm install vue-router
2. 起步示例
2.1 单个html页面中使用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>libing.vue</title> <script src="node_modules/vue/dist/vue.min.js"></script> <script src="node_modules/vue-router/dist/vue-router.min.js"></script> </head> <body> <div id="app"> <ul> <li> <router-link to="/home">Home</router-link> </li> <li> <router-link to="/about">About</router-link> </li> </ul> <router-view></router-view> </div> <template id="home"> <div>Home</div> </template> <template id="about"> <div>About</div> </template> <script> var home = Vue.extend({ template: "#home" }); var about = Vue.extend({ template: "#about" }); const routes = [{ path: '/home', component: home },{ path: '/about', component: about } ]; const router = new VueRouter({ routes: routes }); const app = new Vue({ router }).$mount('#app'); </script> </body> </html>