工业互联网APP开发技术与应用（微课版）项目四 工业互联网App开发前端技术进阶.pptxVIP

徐工汉云技术股份有限公司2023年2月Vue.js进阶

2学习目标了解VueRouter、VueX、Slot、Plugin、混入掌握Filter、组件注册、自定义事件掌握Vue服务端渲染、Vue项目部署

3CONTENTS目录Vue路由1VueX状态管理2Vue服务器端渲染3组件注册4

4CONTENTS目录自定义事件5插槽6混入7过滤器8

5CONTENTS目录插件9

6PART01Vue路由

7客户端vs服务端路由服务端路由指的是服务器根据用户访问的URL路径返回不同的响应结果。当在一个传统的服务端渲染的web应用中点击一个链接时，浏览器会从服务端获得全新的HTML，然后重新加载整个页面。然而，在单页面应用中，客户端的JavaScript可以拦截页面的跳转请求，动态获取新的数据，然后在无需重新加载的情况下更新当前页面。这样通常可以带来更顺滑的用户体验，尤其是在更偏向“应用”的场景下，因为这类场景下用户通常会在很长的一段时间中做出多次交互。在这类单页应用中，路由是在客户端执行的。一个客户端路由器的职责就是利用诸如HistoryAPI或是HashChange事件这样的浏览器API来管理应用当前应该渲染的视图。Vue路由

8VueRouterVue很适合用来构建单页面应用。对于大多数此类应用，都推荐使用官方支持的路由库。要了解更多细节，请查看VueRouter官方文档/zh/introduction.html。用Vue+VueRouter创建单页应用非常简单，通过Vue.js已经用组件组成了我们的应用。当加入VueRouter时，我们需要做的就是将组件映射到路由上，让VueRouter知道在哪里渲染它们。下面是一个基本的例子：Vue路由scriptsrc=/vue@3/scriptscriptsrc=/vue-router@4/script?divid=apph1HelloApp!/h1p!--使用router-link组件进行导航--!--通过传递`to`来指定链接--!--`router-link`将呈现一个带有正确`href`属性的`a`标签--router-linkto=/GotoHome/router-linkrouter-linkto=/aboutGotoAbout/router-link/p!--路由出口--!--路由匹配到的组件将渲染在这里--router-view/router-view/div

9VueRouter通过调用app.use(router)，可以在任意组件中以this.$router的形式访问，并且以this.$route的形式访问当前路由。Vue路由//Home.vueexportdefault{computed:{username(){//我们很快就会看到`params`是什么returnthis.$route.params.username},},

10动态路由匹配很多时候需要将给定匹配模式的路由映射到同一个组件。例如，可能有一个User组件，它应该对所有用户进行渲染，但用户ID不同。在VueRouter中可以在路径中使用一个动态字段来实现，这个字段称之为路径参数，现在像“/users/johnny”和“/users/jolyne”这样的URL都会映射到同一个路由，。当一个路由被匹配时，它的params的值将在每个组件中以this.$route.params的形式暴露出来Vue路由constUser={template:divUser/div,}?//这些都会传递给`createRouter`constroutes=[//动态字段以冒号开始{path:/users/:id,component:User},]constUser={template:divUser{{$route.params.id}}/div,}

11动态路由匹配相同的组件实例将被重复使用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会被调用。要对同一个组件中参数的变化做出响应的话，可以简单地watch$route对象上的任意属性，或者，使用beforeRouteUpdate导航守卫，它也可以取消导航。Vue路由constUser={template:...,created(){th