路由传参 +$router与$route区别

深藏阁楼爱情的钟 2022-12-26 04:52 213阅读 0赞

路由传参 + r o u t e r 与 router与 router与route区别

座右铭：越努力越幸运，越运动越健康。热爱前端技术，热爱运动的这样一个人

文章目录

  • 路由传参 + r o u t e r 与 router与 router与route区别
  • 一、路由传参
    • 1.params方式
    • 2.query方式
  • 二、router与route区别
  • 三、路由导航的两种方法

一、路由传参

1.params方式

  1. //通过 url/参数 传参
  2.     <router-link :to="'/home/'+id">home</router-link>
  3.     //通过params方式定义的参数需要在路由中指定
  4.     { path: '/home/:id', component: Home},
  5.     //参数--通过$route.params.id获取参数

2.query方式

  1. // 通过 url?name=xx&id=xx&sex=xx 传参
  2.     <router-link to="/news?id=10&name='abc'">test</router-link>
  3.     //通过query方式定义的参数 不需要在路由中指定
  4.       { path: '/news', name:'abc',component: News},
  5.     //参数--通过$route.query.id 通过$route.query.name获取参数获取参数

二、router与route区别

1、$route对象
在这里插入图片描述

2、$router对象(路由实例)
在这里插入图片描述

三、路由导航的两种方法

路由导航的两种方法

发表评论

表情：
评论列表 （有 0 条评论，213人围观）

还没有评论，来说两句吧...

相关阅读