vue页面传参

freedom-feng 2021-12-08 原文

vue页面跳转，传参方式大约可以有下面3种情况。

标签跳转及传参（router-link）
js控制跳转路由及传参（this.$router.push）
路由组件传参

　　下面看一下这3者。

　　一、标签跳转及传参

　　:to后面可以跟字符串也可以跟对象。

<template>
  <div id="app">
    <div><router-link :to="/">首页</router-link></div>
    <div><router-link :to="{path:\'/news/detail\',query:{id:1}}">详情</router-link></div>
    <div><router-link :to="{name:\'newsDetail\',params:{id:1}}">详情</router-link></div>
  </div>
</template>

　　页面接参方式如下

　　使用path + 路径，query + 参数。则用this.$route.query.id取值。

　　使用name +路由名称，params + 参数。则用this.$route.params.id取值。

　　二、$router.push

　　js控制跳转路由传参如下：

　　三、路由组件传参

　　官网地址：https://router.vuejs.org/zh/guide/essentials/passing-props.html

　　首先：路由部分

let routes = [
{
          path: \'/news\',
          name: \'news\',
          props: true,
          meta: {},
          component: () => import(\'@/page/news.vue\')
        },   
      {
          path: \'/newsDetail/:id\',
          name: \'newsDetail\',
          props: true,
          meta: {},
          component: () => import(\'@/page/newsDetail.vue\')
        }   
]

　　需要加参数的部分参考 newsDetail ，path后面跟占位符，props设置为波尔类型，true。

　　跳转页面时使用this.$router.push传参。

　　下面是取值的方式

export default {
  name: \'HelloWorld\',
  data () {
    return {
      msg: \'123
    }
  },
  props:[\'id\'],
  mounted(){
    console.log(this.$route.params.id, this.id)
  }
}

　　取值时，方法1：可以直接使用this.$route.params.id取值。

　　　　　　方法2：也可以先放到props中，就可以直接用this.id拿到了。