• Vue.js


    一、使用冒号(:)的形式传递参数

    1,路由列表的参数设置

    (1)路由列表的 path 是可以带参数的,我们在路由配置文件(router/index.js)里以冒号的形式设置参数。
    (2)下面样例代码中,我在跳转到欢迎页面(/hello)时,带有两个参数:id 和 userName。
    import Vue from 'vue'
    import Router from 'vue-router'
    import index from '@/components/index'  //引入首页组件
    import hello from '@/components/hello'  //引入欢迎页组件
     
    //Vue全局使用Router
    Vue.use(Router)
     
    export default new Router({
      routes: [ //配置路由,使用数组形式
        {
          path: '/',   //链接路径
          name: 'index',  //路由名称
          component: index  //映射的组件
        },
        {
          path: '/hello/:id/:userName',
          name: 'hello',
          component: hello
        }
      ]
    })

    2,参数的传递

    (1)如果使用 <router-link> 组件跳转的话,可以这么携带参数:
    <router-link to="/hello/123/hangge">跳转到 hello</router-link>
    (2)如果使用 js 代码跳转的话,可以这么携带参数:
    this.$router.push("/hello/123/hangge");

    3,参数的获取

    页面中通过 $route.params.xxx 获取传递过来的数据。
    <template>
      <div>
        <h1>ID:{{ $route.params.id}}</h1>
        <h1>用户名:{{ $route.params.userName}}</h1>
      </div>
    </template>

    4,运行效果

    可以看到点击首页链接进行跳转后,参数成功传递并显示。
      原文:Vue.js - 路由 vue-router 的使用详解2(参数传递)   原文:Vue.js - 路由 vue-router 的使用详解2(参数传递)
     

    二、使用 query 方式传递参数

    1,路由列表

    query 方式类似 get 传参,即通过 URL 传递参数。而路由列表的 path 不需要配置参数:
    import Vue from 'vue'
    import Router from 'vue-router'
    import index from '@/components/index'  //引入首页组件
    import hello from '@/components/hello'  //引入欢迎页组件
     
    //Vue全局使用Router
    Vue.use(Router)
     
    export default new Router({
      routes: [ //配置路由,使用数组形式
        {
          path: '/',   //链接路径
          name: 'index',  //路由名称
          component: index//映射的组件
        },
        {
          path: '/hello',
          name: 'hello',
          component: hello
        }
      ]
    })

    2,参数的传递

    (1)如果使用 <router-link> 组件跳转的话,可以这么携带参数:

    <router-link :to="{path:'/hello', query:{id:123, userName:'hangge'}}">
      跳转到 hello
    </router-link>

    (2)如果使用 js 代码跳转的话,可以这么携带参数:

    this.$router.push({
      path:'/hello',
      query:{id:123, userName:'hangge'}
    });

    3,参数的获取

    页面中通过 $route.query.xxx 获取传递过来的数据。
    <template>
      <div>
        <h1>ID:{{ $route.query.id}}</h1>
        <h1>用户名:{{ $route.query.userName}}</h1>
      </div>
    </template>

    4,运行效果 

    可以看到点击首页链接进行跳转后,参数是自动拼接到 url 后面进行传递的。
    原文:Vue.js - 路由 vue-router 的使用详解2(参数传递)

    三、使用 params 方式传递参数

    1,路由列表

    params 方式类似于 post 传参,即传递的参数不会显示在 URL 上。同上面的 query 方式一样,路由列表的 path 不需要配置参数:
    import Vue from 'vue'
    import Router from 'vue-router'
    import index from '@/components/index'  //引入首页组件
    import hello from '@/components/hello'  //引入欢迎页组件
     
    //Vue全局使用Router
    Vue.use(Router)
     
    export default new Router({
      routes: [ //配置路由,使用数组形式
        {
          path: '/',   //链接路径
          name: 'index',  //路由名称
          component: index//映射的组件
        },
        {
          path: '/hello',
          name: 'hello',
          component: hello
        }
      ]
    })

    2,参数的传递

    注意:params 只能用 name 来引入路由,而不能用 path。

    (1)如果使用 <router-link> 组件跳转的话,可以这么携带参数:

    <router-link :to="{name:'hello', params:{id:123, userName:'hangge'}}">
      跳转到 hello
    </router-link>

    (2)如果使用 js 代码跳转的话,可以这么携带参数:

    this.$router.push({
      name:'hello',
      params:{id:123, userName:'hangge'}
    });

    3,参数的获取

    页面中通过 $route.params.xxx 获取传递过来的数据。
    <template>
      <div>
        <h1>ID:{{ $route.params.id}}</h1>
        <h1>用户名:{{ $route.params.userName}}</h1>
      </div>
    </template>

    4,运行效果

    可以看到这种方式,参数的传递不会拼接到 url 后面。
    原文:Vue.js - 路由 vue-router 的使用详解2(参数传递)
     

    附:使用 props 实现参数解耦 

        从上面的样例可以看出,当路由携带参数跳转时,页面这边通过 $route.params.xxx 或 $route.query.xxx 来获取传递过来的数据。但这样有个问题,由于组件中使用 $route 会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的 URL 上使用,限制了其灵活性。
        要解决这个问题,我们可以使用 props 将组件和路由解耦。props 共有如下三种模式。
     

    1,布尔模式

    (1)直接将路由配置中的 props 属性被设置为 true,那么参数将会被设置为组件属性。
    export default new Router({
      routes: [ //配置路由,使用数组形式
        {
          path: '/',   //链接路径
          name: 'index',  //路由名称
          component: index  //映射的组件
        },
        {
          path: '/hello/:id/:userName',
          name: 'hello',
          component: hello,
          props: true
        }
      ]
    })


    (2)然后我们页面组件这边不再需要通过 $route.params.xxx 或 $route.query.xxx 来获取传递过来的数据。

    <template>
      <div>
        <h1>ID:{{ id }}</h1>
        <h1>用户名:{{ userName}}</h1>
      </div>
    </template>
     
    <script>
      export default {
        name: 'hello',
        props: ['id', 'userName']
      }
    </script>

    2,对象模式

    (1)我们可以将 props 设置为一个对象,对象内容会被设置为组件属性。这种方式常用来配置静态参数。
    export default new Router({
      routes: [ //配置路由,使用数组形式
        {
          path: '/',   //链接路径
          name: 'index',  //路由名称
          component: index  //映射的组件
        },
        {
          path: '/hello',
          name: 'hello',
          component: hello,
          props: {
            id: 1234,
            userName: "hangge"
          }
        }
      ]
    })


    (2)然后页面组件这边获取数据方式和前面一样。

    <template>
      <div>
        <h1>ID:{{ id }}</h1>
        <h1>用户名:{{ userName}}</h1>
      </div>
    </template>
     
    <script>
      export default {
        name: 'hello',
        props: ['id', 'userName']
      }
    </script>

    3,函数模式

    (1)我们还可以创建一个函数返回 props,在函数中对参数值进行处理,或者将静态值与基于路由的值结合。
    function dynamicPropsFunc (route) {
      return {
        message: "欢迎您:" + route.params.userName
      }
    }
     
    export default new Router({
      routes: [ //配置路由,使用数组形式
        {
          path: '/',   //链接路径
          name: 'index',  //路由名称
          component: index  //映射的组件
        },
        {
          path: '/hello',
          name: 'hello',
          component: hello,
          props: dynamicPropsFunc
        }
      ]
    })


    (2)这里假设我们使用 JS 进行跳转,代码如下:

    this.$router.push({
      name:'hello',
      params:{id:123, userName:'hangge'}
    });

    (3)目标页面组件代码,以及运行结果如下:

    原文:Vue.js - 路由 vue-router 的使用详解2(参数传递)
    <template>
      <div>
        <h1>{{ message }}</h1>
      </div>
    </template>
     
    <script>
      export default {
        name: 'hello',
        props: ['message']
      }
    </script>
  • 相关阅读:
    gorm 创建数据时字段跟结构体不一致
    查看端口信息
    Mysql 新建用户 并指定能访问的数据库权限
    网页端实现快速播放(有些网页不让快进.....的解决办法)
    Mybatis Map保存到数据库,Mybatis Map动态同步表,Mybatis Map Foreach插入数据库
    Java 获取Exception详细信息,Java获取异常详细内容
    weblogic禁用IIOP协议,weblogic CVE-2020-2551漏洞修复
    IntelliJ IDEA安装配置,IntelliJ IDEA配置Maven,IntelliJ IDEA设置热部署
    Java URL链接动态添加参数,Java URL链接删除参数,UrlUtils链接参数工具类
    Oracle weblogic隐藏console,weblogic修改控制台console入口
  • 原文地址:https://www.cnblogs.com/amujoe/p/11208457.html
Copyright © 2020-2023  润新知