VueRouter认识
1、 什么是路由？
路由（vue-router）是负责将进入的浏览器请求映射到特定的 组件 代码中。即决定了由谁(组件)去响应客户端请求。简单说路由就是url地址和对应的资源的映射，通过一个路径的url地址，可以唯一找到一个资源。路由不包含在vue中，是一个插件，需要单独下载。
官方地址：https://router.vuejs.org/zh/
地址：https://unpkg.com/vue-router@3.0.1/dist/vue-router.js
2、路由的使用
注意：作为vue的插件，需要单独引入js文件，且必须在vue.js之后引入。
路由的使用步骤：
1、定义模板
2、定义组件
3、创建路由对象
4、将路由对象配置到vue实例中
5、路由调用：
<router-link to=“跳转路径”></router-link>：该标签会默认被解析成<a>标签
<router-view></router-view>：该标签用于展示组件中的内容，是路由的出口
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <!-- ==============================5、使用路由==================================== --> <div id="app"> <!-- 使用 router-link 组件来导航：该标签默认会被解析成一个<a></a>标签 --> <!-- 通过传入 `to` 属性指定链接. --> <router-link to="/employee">员工管理</router-link> <router-link to="/department">部门管理</router-link> <router-link to="/storage">仓库管理</router-link> <hr /> <!--分隔线--> <router-view></router-view> <!--路由出口：用于展示组件中的内容--> </div> <!-- ==============================1、定义组件模板==================================== --> <template id="temp"> <!--这个div是根标签--> <div> <h1>员工管理</h1> 模板内容 </div> </template> <template id="temp2"> <!--这个div是根标签--> <div> <h1>部门管理</h1> 模板内容 </div> </template> <template id="temp3"> <!--这个div是根标签--> <div> <h1>仓库管理</h1> 模板内容 </div> </template> <script type="text/javascript" src="js/vue.js" ></script> <!--重点--> <!--vue路由必需js文件：要在vue.ja文件后面--> <script type="text/javascript" src="js/vue-router.js" ></script> <!--重点--> <script> /* =================================2、定义组件========================================== */ var emp= Vue.component("compon1",{ template:"#temp" }) var depar = Vue.component("compon2",{ template:"#temp2" }) var stor = Vue.component("compon3",{ template:"#temp3" }) /* =======================3、创建路由对象=================================== */ var route = new VueRouter({ routes:[ { path:"/employee", //路径 component:emp //路由对应的资源（获取vue组件对象） }, { path:"/department",//路径 component:depar //路由对应的资源（获取vue组件对象） }, { path:"/storage", //路径 component:stor //路由对应的资源（获取vue组件对象） } ] }) /* =======================4、将路由对象配置到vue实例中=================================== */ //挂载vue实例 var app= new Vue({ el:"#app", router:route }) </script> </body> </html>
