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

<template>
<div id="app">
<div><router-link to="/">首页</router-link></div>
<div><a href="javascript:void(0)" @click="getMovieDetail(1)">去第二个页面</a></div>
<div><router-link to="/home">去home</router-link></div>
<router-view/> <a href="https://www.feiyit.com">abc</a>
</div>
</template> <script>
export default {
name: 'app',
methods:{
getMovieDetail(id) {
this.$router.push({
name: 'login',
params: {
id: id
}
})
}
}
}
</script> <style> </style>

  第二页接收传值:

<template>

</template>

<script>

export default {
name: 'login',
data () {
return {
uid:this.$route.params.id,
msg: '这是第二个页面'
}
},
computed: { },
mounted: function() {
console.log(this.uid);
},
methods:{ }
}
</script>

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

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

export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/login/:id',
name: 'login',
component: login,
meta: {
title: '登录页'
}
},
{
path: '/home',
name: 'home',
component: home,
meta: {
title: '其他页'
}
}
]
})

  

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. 201871010134-周英杰《面向对象程序设计(java)》第七周学习总结

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

  3. 面向对象程序设计(Java) 第6-7周学习指导及要求

    面向对象程序设计(Java)第6-7周学习指导及要求 (2019.9.29-2019.10.8)   学习目标 深入理解程序设计中算法与程序的关系: 深入理解java程序设计中类与对象的关系: 理解O ...

  4. Dubbo介绍(一)

    Dubbo是一个分布式.高性能.透明化的 RPC 服务框架,作用是提供服务自动注册.自动发现等高效服务治理方案. 一.Dubbo架构图 Provider:提供者,服务发布方 Consumer:消费者, ...

  5. SQL基础知识整理

    建议:关键字和函数名全部大写:数据库名称.表名称.字段名称全部小写:分号结尾.但是大小写语句不区分,本人讨厌大写(英语菜,不能一眼看出内容),所以全部小写.[]看情况可有可无,{}花括号的内容必须要有 ...

  6. Linux性能优化实战学习笔记:第四十讲

    一.上节回顾 上一节,我们学习了碰到分布式拒绝服务(DDoS)的缓解方法.简单回顾一下,DDoS利用大量的伪造请求,导致目标服务要耗费大量资源,来处理这些无效请求,进而无法正常响应正常用户的请求. 由 ...

  7. [LeetCode] 82. Remove Duplicates from Sorted List II 移除有序链表中的重复项之二

    Given a sorted linked list, delete all nodes that have duplicate numbers, leaving only distinct numb ...

  8. vue 图片放大镜效果

    插件名称:vue-photo-zoom-pro https://github.com/Mater1996/vue-photo-zoom-pro 效果图  使用: <template> &l ...

  9. 使用阿里云OSS上传文件

    本文介绍如何利用Java API操作阿里云OSS对象存储. 1.控制台操作 首先介绍一下阿里云OSS对象存储的一些基本概念. 1.1 进入对象存储界面 登录阿里云账号,进入对象存储界面,如图所示. 进 ...

  10. 责任链模式Scala的7种实现

    责任链模式是经典的GoF 23种设计模式之一,也许你已经了解这种模式.不管你是否熟悉,建议读者在阅读本文之前,不妨先思考下面三个问题: (1) 如何用多种风格迥异的编程范式来实现责任链模式? (2) ...