• 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>
  • 相关阅读:
    .NET 4.6.1 给cookie添加属性
    Blog目录
    1019 数字黑洞
    1018 锤子剪刀布
    1017 A除以B
    1016 部分A+B
    1015 德才论
    1014 福尔摩斯的约会
    1013 数素数
    1012 数字分类
  • 原文地址:https://www.cnblogs.com/amujoe/p/11208457.html
Copyright © 2020-2023  润新知