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>
  • 相关阅读:
    吴军博士:物联网和人工智能将再造一个英特尔和微软 | 万物互联
    速来膜拜!20位活跃在Github上的国内技术大牛
    创建带Mipmap的osg::Image
    C#文件系统管理【转】
    C#文本文件(.txt)读写 [转]
    C#连接SQL Server数据库进行简单操作[转]
    shell脚本把一些请求量非常高的ip给拒绝掉
    linux获取精准进程PID之pgrep命令
    Kubernetes的Cron Job
    StatefulSet和Deployment的区别
  • 原文地址:https://www.cnblogs.com/likewpp/p/10827320.html
Copyright © 2011-2022 走看看