《Vue应用开发》课件-5.6命名路由_第1页
《Vue应用开发》课件-5.6命名路由_第2页
《Vue应用开发》课件-5.6命名路由_第3页
《Vue应用开发》课件-5.6命名路由_第4页
《Vue应用开发》课件-5.6命名路由_第5页
已阅读5页，还剩9页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

命名路由5.6

先定一个小目标！掌握命名路由的使用方法，能够解释命名路由的实现5.6命名路由为什么使用命名路由？5.6命名路由使用路由时，一般会先在routes属性中配置路由匹配规则，然后在页面中使用<router-link>的to属性跳转到指定目标地址。但这种方式存在一些弊端，例如，当目标地址比较复杂时，不便于记忆；当地址发生变化时，需要同步修改所有使用了该地址的代码，会增加开发的工作量。为此，VueRouter提供了命名路由。5.6命名路由在定义路由匹配规则时，使用name属性为路由匹配规则定义路由名称，即可实现命名路由。当路由匹配规则有了路由名称后，在定义路由链接或执行某些跳转操作时，可以直接通过路由名称表示相应的路由，不再需要通过路由路径表示相应的路由。使用命名路由的语法格式如下。{path:'路由路径',name:'路由名称',component:组件}命名路由的name属性值不能重复，必须保证是唯一的。注意5.6命名路由在<router-link>标签中使用命名路由时，需要动态绑定to属性的值为对象。当使用对象作为to属性的值时，to前面要加一个冒号，表示使用v-bind指令进行绑定。在对象中，通过name属性指定要跳转到的路由名称，使用params属性指定跳转时携带的路由参数，语法格式如下。<router-link:to="{name:路由名称,params:{参数名:参数值}}"></router-link>5.6命名路由使用命名路由实现单击Home组件的“跳转到MovieDetails组件”链接跳转到MovieDetails组件，并在页面中获取id值。5.6命名路由步骤1演示如何使用命名路由步骤2在src\components\Home.vue文件中的<router-link>标签中动态绑定to属性的值，指定要跳转到的路由名称，并传递参数。要跳转到MovieDetails路由5.6命名路由在src\router.js文件中，将“:id”路径的路由名称定义为MovieDetails。定义路由名称演示如何使用命名路由步骤1步骤25.6命名路由步骤3演示如何使用命名路由步骤4下载一张图片存放在public文件夹中，在src\components\MovieDetails.vue文件中的，增加对用id的照片和文字进行自我介绍。5.6命名路由在Movie.vue文件中，增加自我介绍的动态路由。演示如何使用命名路由步骤3步骤45.6命名路由思考：在movie.vue增加命名路由。跳转回tab2页面，router。js文件需要增加什么内容思考：在movie.vue增加命名路由。跳转回tab2页面，router。js文件需要增加什么内容在浏览器中访问:5173/。单击“首页”链接后的页面效果、单击“跳转到MovieDetails组件”链

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论