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 chart="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-l周杰伦北大ink> <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" s龟虽寿原文及翻译rc="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:"/sto福建本一大学rage", //路径 关于人生的名言 component:stor //路由对应的资源（获取vue组件对象） } ] }) /* =======================4、将路由对象配置到vue实例中=================================== */ //挂载vue实例 var app= new vue({ el:"#app", router:route }) </script> </body></html>
本文发布于:2023-04-06 08:57:23，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/e9057a3d3c56d55ac066af458771bf18.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：VueRouter认识.doc
本文 PDF 下载地址：VueRouter认识.pdf
| 留言与评论（共有 0 条评论） |
