route 与 router 之间的差别

简述:

router:主要用于处理一些动作,

route:主要获得或处理一些数据,比如地址、参数等

例:

videoInfo1.vue:

javascript 复制代码
<template>
  <div class="video-info">
    <h3>二级组件:点赞情况分析</h3>
  </div>
</template>

<script>
export default {
  name: 'video-Info1',
  created () {
    setTimeout(() => {
      // 这里router进行路由跳转
      this.$router.push({ name: 'video-info2', query: { somedata: 'info1传递来的信息' } })
    }, 3000)
  }
}
</script>

<style>

</style>

videoInfo2.vue:

javascript 复制代码
<template>
  <div class="video-info">
    <h3>二级组件:互动情况分析</h3>
  </div>
</template>

<script>
export default {
  name: 'video-info2',
  mounted () {
    console.log(this.$route.query)
    // 这里route进行数据获取
  }
}
</script>

<style>

</style>

用户主动点info2,输出为空;

从 info1 跳转到 info2 后,info2 输出从 info1 传递过来的数据:

相关推荐
念恒123068 小时前
传输层协议TCP
服务器·网络·tcp/ip
慧一居士8 小时前
Sass和Less功能、使用场景、用法对比
前端·css·less·sass
leoZ2318 小时前
AI+前端提效-09 AI赋能前端测试:单元测试、E2E测试自动生成,提升覆盖率
前端·人工智能·opencv·目标检测·数据挖掘·单元测试·语音识别
爱研究的小梁9 小时前
打破时延‑带宽悖论|乾元通 QMP‑UDP,为无人载具提供低延时高带宽原生通信方案
网络·网络协议·udp
hkNaruto9 小时前
【游戏】低帧率策略游戏类帧同步保障公平性软件详细设计文档
网络·游戏
计算机魔术师9 小时前
OpenAI 评定 Astra 达到网络安全 Critical 能力阈值,将受限发布
前端
JavaGuide9 小时前
SpaceX 工程师的 AI Coding 玩法太牛了, 200 多个 Agent 并行!
前端·后端
小猪code9 小时前
frp 80/443 Web 服务两种部署模式实操笔记
前端·笔记
JamesZhang800789 小时前
Chrome相关知识点
前端
比兔代理9 小时前
代理IP池性能瓶颈在哪?并发、带宽与IP质量的平衡优化策略
服务器·网络·tcp/ip·安全