• vue的三种传参方式


    传参:

    1. 页面式(html)标签路由跳转传参 ----- router-link(其实就是a标签)

    2. js编程式路由跳转 ----- this.$router.push()  // params  query 

    3. 路由组件传参 ----- 在路由配置中用分号拼接参数

    获取参数:

    1. this.$router.params ----- 搭配路由的name属性,参数作为路由的一部分,不会在url显示

    2. this.$router.query ----- 使用path来匹配路由,可以在url看到?后面的就是传递的参数

    一、router-link

    <router-link :to="{path:'/news/detail',query:{id:1}}">详情</router-link>

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

    <router-link :to="{name:'newsDetail',params:{id:1}}">详情</router-link>

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

    二、this.$router.push() ----- key,value键值对的形式

    1. query 显示在url

    // 传参
    sendData(){
    this.$router.push({ path: './describe', query: { id:id, title:title } }) }
    // 接收参数
    this.$route.query.id
    this.$route.query.title

    2. params 不会显示在url

    // 传参
    sendData(){
        this.$router.push({ 
            name: './describe', 
            params: { 
                id:id,
                title:title
            }
        })  
    }
    // 接收参数
    this.$route.params.id
    this.$route.params.title

    三、路由组件传参 

    路由部分:

    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')
    }  
    ]  

    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拿到了。

    参考:https://www.cnblogs.com/freedom-feng/p/11528836.html

  • 相关阅读:
    maven项目编译漏掉src/main/java下的xml配置文件
    读《架构探险——从零开始写Java Web框架》
    使用generator自动生成Mybatis映射配置文件
    git项目添加.gitigore文件
    git-bash下, 启动sshd
    git-bash.exe参数
    少估了一分, 还算不错
    python常用库
    Linux下python pip手动安装笔记
    python学习笔记
  • 原文地址:https://www.cnblogs.com/xiong88/p/12720955.html
Copyright © 2020-2023  润新知