zoukankan      html  css  js  c++  java
  • vue路由的四种传值

    第一种:props

    配置:

      组件内定义:

    props: ['id']

      路由映射配置,开启props:true :

           {
                path: '/user/:id',
                component: User,
                props: true
            }   

    跳转传参:

      1、标签跳转

    <router-link to="/user/1">第一个</router-link>

      2.函数式跳转:

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

    获取参数:

    <div>第一种传值props: {{ id }}</div>

    第二种:

    配置:(url显示在问号之前)

      路由映射配置:

    {
        path: '/user/:id',
        component: User
    },

    跳转传参:

      1、标签跳转

    <router-link to="/user/1">第二个</router-link>

      2.函数式跳转:

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

    获取参数:

    <div>第二种传值$route.params.id: {{$route.params.id}}</div>

    第三种:(url不显示参数)

    配置:

      路由映射配置:

    {
        path: '/user',
        component: User
    },  

    跳转传参:

     1、标签跳转

    <router-link :to="{name:'c', params:{id:1}}">第四个</router-link>

     2.函数式跳转:

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

    获取参数:

    <div>第三种传值$route.params.id: {{$route.params.id}}</div>

    第四种:(url显示在?之后)

    配置:

      路由映射配置:

    {
        path: '/user',
        component: User
    },  

    跳转传参:

     1、标签跳转

    <router-link :to="{name:'c', query:{id:1}}">第四个</router-link>

     2.函数式跳转:

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

    获取参数:

    <div>第四种传值$route.query.id: {{$route.query.id}}</div>
  • 相关阅读:
    《机电传动控制》学习笔记08-1
    《机电传动控制》学习笔记-07
    《机电传动控制》学习笔记-06
    《机电传动控制》学习笔记05-2
    《机电传动控制》学习笔记05-1
    《团队项目》日志一
    《实时控制软件》第四周作业
    《实时控制软件》第三周作业
    《实时控制软件》第二周作业
    《机电传动控制》PLC仿真
  • 原文地址:https://www.cnblogs.com/likewpp/p/10827320.html
Copyright © 2011-2022 走看看