第一页,点击进入第二页进行传值:

  1. <template>
  2. <div id="app">
  3. <div><router-link to="/">首页</router-link></div>
  4. <div><a href="javascript:void(0)" @click="getMovieDetail(1)">去第二个页面</a></div>
  5. <div><router-link to="/home">去home</router-link></div>
  6. <router-view/>
  7.  
  8. <a href="https://www.feiyit.com">abc</a>
  9. </div>
  10. </template>
  11.  
  12. <script>
  13. export default {
  14. name: 'app',
  15. methods:{
  16. getMovieDetail(id) {
  17. this.$router.push({
  18. name: 'login',
  19. params: {
  20. id: id
  21. }
  22. })
  23. }
  24. }
  25. }
  26. </script>
  27.  
  28. <style>
  29.  
  30. </style>

  第二页接收传值:

  1. <template>
  2.  
  3. </template>
  4.  
  5. <script>
  6.  
  7. export default {
  8. name: 'login',
  9. data () {
  10. return {
  11. uid:this.$route.params.id,
  12. msg: '这是第二个页面'
  13. }
  14. },
  15. computed: {
  16.  
  17. },
  18. mounted: function() {
  19. console.log(this.uid);
  20. },
  21. methods:{
  22.  
  23. }
  24. }
  25. </script>

  注意,如果刷新login页面,将失去传值

解决方法,在路由里面增加变量        其中【/login/:id】

  1. export default new Router({
  2. routes: [
  3. {
  4. path: '/',
  5. name: 'HelloWorld',
  6. component: HelloWorld
  7. },
  8. {
  9. path: '/login/:id',
  10. name: 'login',
  11. component: login,
  12. meta: {
  13. title: '登录页'
  14. }
  15. },
  16. {
  17. path: '/home',
  18. name: 'home',
  19. component: home,
  20. meta: {
  21. title: '其他页'
  22. }
  23. }
  24. ]
  25. })

  

vue 利用路由跨页传参的更多相关文章

  1. Vue Router路由导航及传参方式

    路由导航及传参方式 一.两种导航方式 ①:声明式导航 <router-link :to="..."> ②:编程式导航 router.push(...) 二.编程式导航参 ...

  2. Vue之路由跳转 传参 aixos 和cookie

    一.路由跳转 1.1 项目的初始化 vue create m-proj   >>>创建vue项目 精简vue项目的 views 视图   About(基本是删除的) Home.(可以 ...

  3. vue中的路由传参及跨组件传参

    路由跳转   this.$router.push('/course'); this.$router.push({name: course}); this.$router.go(-1); this.$r ...

  4. vue 组件传参及跨域传参

    可以完成跨组件传参的四种方式 // 1) localStorage:永久存储数据 // 2) sessionStorage:临时存储数据(刷新页面数据不重置,关闭再重新开启标签页数据重置) // 3) ...

  5. vue路由(一个包含重定向、嵌套路由、懒加载的main.js如下)and 路由跳转传参的query和params的异同

    import Vue from 'vue'import VueRouter from 'vue-router'import App from './App'Vue.use(VueRouter)cons ...

  6. 微信小程序~跳页传参

    [1]需求: 点击商品,跳到相应商品详情页面 [2]代码: (1)商品列表页 <view class="goodsList"> <view wx:for=&quo ...

  7. js 实现vue—引入子组件props传参

    参考:https://www.cnblogs.com/xiaohuochai/p/7388866.html 效果 html <!DOCTYPE html> <html> < ...

  8. dolphinscheduler简单任务定义及复杂的跨节点传参

    dolphinscheduler简单任务定义及跨节点传参 转载请注明出处 https://www.cnblogs.com/funnyzpc/p/16395094.html 写在前面 dolphinsc ...

  9. Apache DolphinScheduler 简单任务定义及复杂的跨节点传参

    ​ 点亮 ️ Star · 照亮开源之路 GitHub:https://github.com/apache/dolphinscheduler Apache DolphinScheduler是一款非常不 ...

随机推荐

  1. 2019面向对象程序设计(Java) 第17周-18周学习指导及要求

    2019面向对象程序设计(Java)第17周-18周学习指导及要求 (2019.12.20-2019.12.31)   学习目标 (1) 理解和掌握线程的优先级属性及调度方法: (2) 掌握线程同步的 ...

  2. 201871010110-李华《面向对象程序设计(java)》第十四周学习总结

    博文正文开头格式:(2分) 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.co ...

  3. 201871010134-周英杰 《面向对象程序设计(java)》第十二周学习总结

    201871010134-周英杰 <面向对象程序设计(java)>第十二周学习总结 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ ...

  4. Sharding-JDBC 学习资料

    学习资料 网站 官网 https://shardingsphere.apache.org/document/current/cn/manual/sharding-jdbc/ 基于 Docker 的 M ...

  5. nginx 常见的问题

    1.server匹配优先级 nginx 读取文件名是按照文件排序优先读取的顺序    对与一样的server 优先使用先读取到的 2.location匹配优先级 =    进行普通字符精确匹配,也就是 ...

  6. Mysql-多表数据记录查询

    多表数据记录查询 一.关系数据操作 并(UNION) 并就是把具有相同字段数目和字段类型的表合并到一起 笛卡尔积(CARTESIAN PRODUCT) 笛卡尔积就是没有连接条件表关系返回的结果. 内连 ...

  7. LG2598/BZOJ1412 「ZJOI2009」狼和羊的故事 最小割

    问题描述 LG2598 BZOJ1412 题解 看到要把狼和羊两个物种分开 自然想到最小割. 发现\((x,y)\)可以向上下左右走以获得贡献,所以建边:\((x,y),(x-1,y)\),\((x, ...

  8. 启动hadoop后jps没有namenode,并且启动报错9000

    启动hadoop报错: 解决方法: 我发现没有9000端口被占用,也不知道9000到哪去了,但是也没有NameNode,于是,直接把NameNode格式化了,再重启HDFS即可. 格式化命令:

  9. AWS云部署项目——数据库与服务器

    1.连接数据库 选择服务RDS,进入后点击数据库实例,在之前建好的数据库内进行操作 首先是安全组,类似于aws云上的防火墙一样的东西,先设置好公开性,安全组置为default(就是尽量避免测试时访问阻 ...

  10. 集合 List ,Set

    https://www.cnblogs.com/jmsjh/p/7740123.html