vue.js通过路由跳转页面的三种方式

古城微笑少年丶 2022-05-14 09:43 289阅读 0赞

现有如下场景，点击父组件的li元素跳转到子组件中，并携带参数，便于子组件获取数据。  
父组件中：

<li v-for="article in articles" @click="getDescribe(article.id)">

methods：

## 方案一： ##

getDescribe(id) {
    //   直接调用$router.push 实现携带参数的跳转
            this.$router.push({
              path: `/describe/${id}`,
            })

方案一，需要对应路由配置如下：

{
         path: '/describe/:id',
         name: 'Describe',
         component: Describe
       }

很显然，需要在path中添加/:id来对应 $router.push 中path携带的参数。在子组件中可以使用来获取传递的参数值。

this.$route.params.id

## 方案二： ##

父组件中：通过路由属性中的name来确定匹配的路由，通过params来传递参数。

this.$router.push({
              name: 'Describe',
              params: {
                id: id
              }
            })

对应路由配置: 注意这里不能使用:/id来传递参数了，因为父组件中，已经使用params来携带参数了。

{
         path: '/describe',
         name: 'Describe',
         component: Describe
       }

子组件中: 这样来获取参数

this.$route.params.id

## 方案三： ##

父组件：使用path来匹配路由，然后通过query来传递参数  
这种情况下 query传递的参数会显示在url后面?id=？

this.$router.push({
              path: '/describe',
              query: {
                id: id
              }
            })

对应路由配置：

{
         path: '/describe',
         name: 'Describe',
         component: Describe
       }

对应子组件: 这样来获取参数

this.$route.query.id

> 这里要特别注意 在子组件中 获取参数的时候是$route.params 而不是  
> $router 这很重要~~~

（[https://github.com/vuejs/vue-...][https_github.com_vuejs_vue-...]）

> tips  
> 可能上面少了this 会误导新手 直接使用 $route来获取，所以这边加上this

[https_github.com_vuejs_vue-...]: https://github.com/vuejs/vue-router

发表评论取消回复

表情：

评论列表（有 0 条评论，289人围观）

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

相关阅读

相关 vue-03-路由-路由跳转的方式

1、第一种就是我们很熟悉的直接在 router-link 里面 to 属性后接路径，或者是通过路由 name 属性绑定 <li> <router-lin

朴灿烈づ我的快乐病毒、/ 2023年07月20日 10:34/ 0 赞/ 15 阅读

相关 uni-app 路由/页面跳转

路由/页面跳转 > [uni-app 官网路由][uni-app _] 简要示范下`uni.navigateTo()` // 不带参数

今天药忘吃喽~/ 2023年02月12日 05:42/ 0 赞/ 1 阅读

相关 jsp页面跳转三种方式的比较

使用JSP大约有下列三种跳转方式： 1. response.sendRedirect(); 2. response.setHeader("Location","");

悠悠/ 2022年08月07日 03:46/ 0 赞/ 183 阅读

相关 vue.js通过路由跳转页面的三种方式

现有如下场景，点击父组件的li元素跳转到子组件中，并携带参数，便于子组件获取数据。父组件中： <li v-for="article in articles" @

古城微笑少年丶/ 2022年05月14日 09:43/ 0 赞/ 290 阅读

相关 SpringMVC页面跳转的三种方式

SpringMVC页面跳转的三种方式一、根据 String 字符串跳转 1、返回字符串 -

桃扇骨/ 2022年05月04日 04:56/ 0 赞/ 744 阅读

相关 vue基础：路由跳转的几种方式。

$nbsp 小谷刚开始学习vue，可以说是完全不懂了。想要实现h5中的跳转，都成了是头疼的事，进过查资料，得出以下总结，希望能对大家有用，也是对知识的记载。 1.最简单的路

灰太狼/ 2022年03月15日 12:18/ 0 赞/ 385 阅读

相关 VueJs路由跳转——vue-router的使用详解

路由对象和路由匹配路由对象，即$router会被注入每个组件中，可以利用它进行一些信息的获取。如 <table> <thead> <tr>

た入场券/ 2022年01月06日 01:33/ 0 赞/ 280 阅读

相关几种页面跳转的方式

页面跳转 1. 用<a>标签<a href=""></a> 2. 用window.location.href="" window.location=""

我会带着你远行/ 2021年12月18日 05:57/ 0 赞/ 468 阅读

相关 vue 路由跳转四种方式 (带参数)

1. router-link 1. 不带参数 <router-link :to="{name:'home'}"> <router-l

太过爱你忘了你带给我的痛/ 2021年09月17日 15:26/ 0 赞/ 374 阅读

相关实现vue路由跳转的三种方式

实现vue路由跳转的三种方式 1、router-link <router-link to='需要跳转到的页面的路径'>

红太狼/ 2020年06月03日 13:33/ 0 赞/ 1848 阅读