路由参数传递

最新推荐文章于 2023-08-09 22:14:57 发布
最新推荐文章于 2023-08-09 22:14:57 发布
阅读量77 收藏
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43988374/article/details/108680286
版权
路由参数传递

参数传递

<template>
  <div id="app">
    <div style="display: flex;flex-direction: row;height: 100%;width: 100%;">
      <div style="height: 100%;background-color: antiquewhite;flex-grow: 1">
        <ul style="padding: 0px">
          <router-link tag="li" replace to="/home" style="height: 50px;list-style-type: none;width: 100%;display: flex;align-items: center;justify-content:center">首页</router-link>
          <router-link tag="li" replace to="/about" style="height: 50px;list-style-type: none;width: 100%;display: flex;align-items: center;justify-content:center">关于</router-link>
          <li style="height: 50px;list-style-type: none;width: 100%;display: flex;align-items: center;justify-content:center">
            <button @click="btn1Click">按钮1</button>
          </li>
          <li style="height: 50px;list-style-type: none;width: 100%;display: flex;align-items: center;justify-content:center">
            <button @click="btn2Click">按钮2</button>
          </li>
          <router-link tag="li" replace :to="'/dynamic/'+userId" style="height: 50px;list-style-type: none;width: 100%;display: flex;align-items: center;justify-content:center">动态路由</router-link>
          <router-link tag="li" replace to="/nested" style="height: 50px;list-style-type: none;width: 100%;display: flex;align-items: center;justify-content:center">嵌套路由</router-link>
          <li>
            <ul>
              <router-link tag="li" replace to="/nested/nested1" style="height: 50px;list-style-type: none;width: 100%;display: flex;align-items: center;justify-content:center">嵌套路由1</router-link>
              <router-link tag="li" replace to="/nested/nested2" style="height: 50px;list-style-type: none;width: 100%;display: flex;align-items: center;justify-content:center">嵌套路由2</router-link>
            </ul>
          </li>
          <router-link tag="li" replace :to="params" style="height: 50px;list-style-type: none;width: 100%;display: flex;align-items: center;justify-content:center">传递参数</router-link>

        </ul>
      </div>
      <div style="height: 100%;background-color: aqua;flex-grow:6;display: flex;flex-direction: column">
        <div style="background-color: azure;flex-grow: 1">
          我是面包屑
        </div>
        <div style="background-color: cornsilk;flex-grow: 15">
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'App',
  data(){
    return {
      userId:"Icez",
      params: {
        path: '/transfer',
        query: {
          name: 'icez',
          like: '会android、会PHP(YII)、会VUE、会Flutter、会Electron、会Cocos'
        }
      }
    }
  },
  components: {
  },
  methods: {
    btn1Click(){
      //退入栈中component
      // this.$router.push('/btn1Component')
      //替换当前栈中的后进来的component
      this.$router.replace('/btn1Component')
    },
    btn2Click(){
      //退入栈中component
      // this.$router.push('/btn2Component')
      //替换当前栈中的后进来的component
      this.$router.replace('/btn2Component')
    }
  }
}
</script>

<style>
#app,body,html{
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin: 0px;
  padding: 0px;
  height: 100%;
  width: 100%;
}
.active{
  color: red;
}
</style>

按钮传递参数

<template>
  <div id="app">
    <div style="display: flex;flex-direction: row;height: 100%;width: 100%;">
      <div style="height: 100%;background-color: antiquewhite;flex-grow: 1">
        <ul style="padding: 0px">
          <router-link tag="li" replace to="/home" style="height: 50px;list-style-type: none;width: 100%;display: flex;align-items: center;justify-content:center">首页</router-link>
          <router-link tag="li" replace to="/about" style="height: 50px;list-style-type: none;width: 100%;display: flex;align-items: center;justify-content:center">关于</router-link>
          <li style="height: 50px;list-style-type: none;width: 100%;display: flex;align-items: center;justify-content:center">
            <button @click="btn1Click">按钮1</button>
          </li>
          <li style="height: 50px;list-style-type: none;width: 100%;display: flex;align-items: center;justify-content:center">
            <button @click="btn2Click">按钮2</button>
          </li>
          <router-link tag="li" replace :to="'/dynamic/'+userId" style="height: 50px;list-style-type: none;width: 100%;display: flex;align-items: center;justify-content:center">动态路由</router-link>
          <router-link tag="li" replace to="/nested" style="height: 50px;list-style-type: none;width: 100%;display: flex;align-items: center;justify-content:center">嵌套路由</router-link>
          <li>
            <ul>
              <router-link tag="li" replace to="/nested/nested1" style="height: 50px;list-style-type: none;width: 100%;display: flex;align-items: center;justify-content:center">嵌套路由1</router-link>
              <router-link tag="li" replace to="/nested/nested2" style="height: 50px;list-style-type: none;width: 100%;display: flex;align-items: center;justify-content:center">嵌套路由2</router-link>
            </ul>
          </li>
          <router-link tag="li" replace :to="params" style="height: 50px;list-style-type: none;width: 100%;display: flex;align-items: center;justify-content:center">传递参数</router-link>
          <li style="height: 50px;list-style-type: none;width: 100%;display: flex;align-items: center;justify-content:center">
            <button @click="transferClick">传递参数2</button>
          </li>
        </ul>
      </div>
      <div style="height: 100%;background-color: aqua;flex-grow:6;display: flex;flex-direction: column">
        <div style="background-color: azure;flex-grow: 1">
          我是面包屑
        </div>
        <div style="background-color: cornsilk;flex-grow: 15">
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'App',
  data(){
    return {
      userId:"Icez",
      params: {
        path: '/transfer',
        query: {
          name: 'icez',
          like: '会android、会PHP(YII)、会VUE、会Flutter、会Electron、会Cocos'
        }
      },
      params2: {
        path: '/transfer2',
        query: {
          name: 'icez',
          like: '会android、会PHP(YII)、会VUE、会Flutter、会Electron、会Cocos'
        }
      }
    }
  },
  components: {
  },
  methods: {
    btn1Click(){
      //退入栈中component
      // this.$router.push('/btn1Component')
      //替换当前栈中的后进来的component
      this.$router.replace('/btn1Component')
    },
    btn2Click(){
      //退入栈中component
      // this.$router.push('/btn2Component')
      //替换当前栈中的后进来的component
      this.$router.replace('/btn2Component')
    },
    transferClick(){
      this.$router.push(this.params2)
    }
  }
}
</script>

<style>
#app,body,html{
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin: 0px;
  padding: 0px;
  height: 100%;
  width: 100%;
}
.active{
  color: red;
}
</style>

接受参数

<template>
  <div>
    传递参数: {{userInfo}}
  </div>
</template>

<script>
export default {
  name: "Transfer",
  data(){
    return {}
  },
  computed: {
    userInfo(){
      return this.$route.query.name + '   ' + this.$route.query.like
    }
  }
}
</script>

<style scoped>

</style>
效果

在这里插入图片描述

冰（Icez）
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
路由的传递参数
qq_45149720的博客
09-28 306
路由的传递参数主要有两种类型 1.params： 配置路由格式：/user/:id 传递的方式：在path后面跟上对应的值 传递后形成路径：/user/123,/user/aaa 获取参数： 2.query的类型： 配置路由格式：/user，就是普通格式 传递方式：对象中使用query的key作为传递方式 传递后形式的路径：/user?id=123,/user?id=aaa 取值： ...
53. 路由的参数传递
Bi-Hu的博客
08-13 208
传递参数主要有两种类型: params和query 第一种就是在配置路由映射路劲path后面添加 :/变量 那种就是 params 主要携带单个参数，传递后形成的路径: /router/123, /router/abc。 第一种也成为动态路由，之前讲过 这里主要讲第二种： 第二种可以携带多参数的，在映射路径中正常写路径path，但是在<router-link> 中的 to 是写一...
第二天——路由如何传递参数
weixin_53314387的博客
03-28 774
params 参数：属于路径当中的一部分，需要注意的是，使用 params 方式传递参数时，我们要在配置路由的地方在路径上进行占位。query 参数：不属于路径当中的一部分，类似于 ajax 中的 queryString，又叫查询参数、查询字符串，指在 URL 路径中最后的以？开始，使用 & 分割（如果有多个）的键值对形式的参数，例如？k=v&k1=v1，不需要占位。
路由传参的几种方式
zoukunyang的博客
02-15 2017
路由的参数分为params参数和query参数，而params传参又可分为在url地址栏中显示参数和不显示参数两种方式。
ICE参数传递分析
rockieyung的专栏
05-21 3509
ICE参数传递分析       ICE由于涉及到不同进程甚至不同主机间的调用，所以需要对参数做些处理，下面以ICE自带的例子printer，并为他加入几个类型和函数进行分析。        ICE为每个内置类型在IceInternal::BasicStream中写了read和write函数，为string、vector、vector也写了read和write函数。如果参数类型为以上类型
阿里Ice中实现组件和页面间跳转并进行参数传递
Blossom
03-03 1361
阿里Ice中组件跳转的几种方式 阿里的飞冰（ice）是对React的封装实现，提供了便捷的React开发模式和最佳实践。在最近对Ice的学习和使用过程中需要使用到组件间和页面之间的跳转功能。目前Ice中可以使用如下几种不同的方式来实现组件或页面之间的跳转功能。 使用<Link />标签进行组件跳转。 使用withRouter在组件内方法中实现页面跳转。 使用history AP...
路由三种传参方式
君莫笑
06-15 1万+
vue路由传参的三种方式
react-router v4 路由跳转 路由传参 路由监听
m_review的博客
11-01 2494
react-router v4 路由跳转 react-router v4 路由传参 使用 withRouter withRouter高阶组件，提供了history让你使用~ import React from "react"; import {withRouter} from "react-router-dom"; class MyComponent extends React.Compon...
vue路由传参的6种方式
一步一个脚印，踏实努力，向着目标前进
08-09 5200
命名路由适用于需要在不同组件之间传递参数的情况，Props传递参数适用于需要在组件之间传递参数的情况，而Vuex状态管理适用于需要在整个应用程序中共享参数的情况。需要考虑参数的类型、数量、动态性、共享性等因素，以及对URL长度和可读性的要求。根据具体的应用场景和需求，可以选择适合的方式来传递参数。在路由定义中给每个路由设置一个唯一的名称，然后通过名称来传递参数。在路由定义中使用props属性来传递参数。在路由定义中使用动态路径参数来传递参数。在路由定义中使用元信息来传递参数。
路由跳转方式与路由参数传递
ym15978525571的博客
08-23 1501
路由跳转方式与路由参数传递
路由传递参数
weixin_42491847的博客
05-11 991
一、参数有几种写法： params：属于路径当中的一部分，需要注意，在配置路由的时候，需要占位 query参数;不属于路径当中的一部分，类似于ajax中的queryString /home?k=v&kv=,不需要占位 路由传递参数： 第一种：字符串形式 params参数（在路由中的search模块需要占位，传递的参数为keywords）query参数是k=v的形式 // this.$router.push("/search/"+this.keyword+...
路由跳转以及传递参数
she8362315的博客
10-10 1万+
路由的跳转 1. this.$router.push({ path: url }); 2.使用前需确定在定义路由时定义了name this.$router.push({ name: '需要跳转的路由name'}); 路由传递参数 1. 传递 this.$router.push({name:'路由name',params:{search:value}}) 获取 this.$route.params...
路由传参的几种方式（含params、query）
weixin_49346957的博客
05-28 1万+
前言：路由传参在vue项目中是很常用的 让我们用最简单的方法理解下3种路由的传参方式 先看一下用到到文件 有哪些 第一种 布尔值传参 1.需要在router文件夹中的index文件 配置路由 { //布尔值传参 path:'/A/:id', //布尔值传参这里必须要写成动态路由的格式 props:true, component:()=>import('@/views/A.vue') } 2.在App.vue中配置路由跳转 里面的aa是参数，也就是最后传过去的东西
Vue - 路由传递参数
weixin_30462049的博客
07-25 3245
Vue 2.0 路由传递参数 Vue 路由传递参数 有两种方式： 一、用name传递参数 　　两步完成用name传值并显示在模板里： 在路由文件src/router/index.js里配置name属性。 1 2 3 4 5 6 7 routes: [ { path: '/...
vue中路由的跳转和参数传递，参数获取
热门推荐
洛神赋
07-31 4万+
vue中的路由讲三点 第一点：指令级别的路由&lt;router-link&gt;和程序级别的路由router.push(); 第二点：通过query和params传递参数和path和name之间的关系。 第三点: $router和$route地区别 声明：由于路由和传参和参数获取密切结合，所以将他们混合在一起讲解，最后会附加一个实例。 html中通过&lt;router-link&gt;指令...
路由传参的三种方式（query/params）
weixin_45946796的博客
08-28 6417
路由带参数： 传参方式可划分为 params 传参和 query 传参，而 params 传参又可分为在 url 中显示参数和不显示参数两种方式 1.params 传参（显示参数）又可分为 声明式 和 编程式 两种方式 声明式router-link：该方式是通过router-link组件的to属性实现，子路由需要提前配置好参数。 <router-link :to="/child/1"> 跳转到子路由 </router-link> 1 { path: '/child/:id',.
uniapp 路由参数传递
最新发布
08-16
在 UniApp 中，可以使用路由参数传递来在页面之间传递数据。UniApp提供了多种传递参数的方式，下面列举了几种常用的方法： 1. Query 参数传递： 在 `uni.navigateTo` 或 `uni.redirectTo` 方法中，可以通过 `url` 参数携带 Query 参数来传递数据。示例代码如下： ```javascript uni.navigateTo({ url: '/pages/detail?id=1&name=example' }); ``` 在目标页面中，可以通过 `this.$route.query` 或 `uni.getStorageSync` 方法来获取 Query 参数的值。 2. URL 传参： 在 `uni.navigateTo` 或 `uni.redirectTo` 方法中，可以通过在 URL 中拼接参数来传递数据。示例代码如下： ```javascript uni.navigateTo({ url: '/pages/detail/1' }); ``` 在目标页面的 `pages.json` 中配置路由时，可以使用动态路由来匹配 URL 参数。例如： ```json { "path": "/pages/detail/:id", "style": { "navigationBarTitleText": "详情页" } } ``` 在目标页面中，可以通过 `this.$route.params` 或 `uni.getStorageSync` 方法来获取 URL 参数的值。 3. Storage 传参： 使用 `uni.setStorageSync` 方法将数据存储在本地缓存中，然后在目标页面中使用 `uni.getStorageSync` 方法来获取存储的数据。示例代码如下： 在当前页面： ```javascript uni.setStorageSync('data', { id: 1, name: 'example' }); uni.navigateTo({ url: '/pages/detail' }); ``` 在目标页面： ```javascript const data = uni.getStorageSync('data'); console.log(data); ``` 以上是几种常用的 UniApp 路由参数传递方式。根据实际需求，选择合适的方式来传递数据。在目标页面中，可以通过 `this.$route.query`、`this.$route.params` 或 `uni.getStorageSync` 方法来获取传递的参数值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值