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

<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. ssh 到服务器然后输入中文保存到本地变成乱码

    很有可能是 默认的编码导致的 尝试执行 echo $LANG 如果是 en_US vim 输入中文有较大概率是 GBK 编码 尝试把这个加入到 ~/.bashrc export LANG=zh_CN. ...

  2. 201871010118-唐敬博 《面向对象程序设计(java)》第十五周学习总结

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

  3. %STSADM% -o addsolution -filename AEMediaPlayerWebpart.wsp

    SET STSADM="c:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\16\bin\STSADM. ...

  4. Centos 安装Django2.1

    一.环境准备 1.1 服务器系统 Centos7 1.2.所需工具 python3(Django 2.0 版本是基于python3 版本,故而安装时需安装python3) Setuptools(> ...

  5. Junit框架使用(4)--JUnit常用断言及注解

    从别人博客中抄过来一点东西 原文地址:http://blog.csdn.net/wangpeng047/article/details/9628449 断言是编写测试用例的核心实现方式,即期望值是多少 ...

  6. 【Spring AOP】AOP的实现(三)

    一.Spring 对AOP的支持 Spring中AOP代理由Spring的IOC容器负责生成.管理,其依赖关系也由IOC容器负责管理.因此,AOP代理可以直接使用容器中的其它bean实例作为目标,这种 ...

  7. Aliyun STS Java SDK示例

    package com.aliyun.oss.demo; import com.aliyuncs.DefaultAcsClient; import com.aliyuncs.exceptions.Cl ...

  8. 遵循PEP8风格

    遵循PEP8风格 在编写python代码的时候我们应该采用统一的风格来编写代码,可以使代码更加容易读懂.采用和其他程序员统一的编码风格来写代码,也可以使项目更利于多人协作开发.即便代码只有你自己能看懂 ...

  9. Linux上zookeeper+dubbo-admin的安装及使用

    空linux安装,需要先安装JDK,mysql,tomcat等 一. dubbo-admin依赖外置tomcat. tomcat依赖JDK. 首先要安装JDK,tomcat,顺便安装mysql 安装J ...

  10. Linux路由器及交换机工作原理

    IP包头中TTL字段的含义是什么?它用来做什么? TTL(time to live):该字段用于表示IP数据包的生命周期, 作用:限制一个数据在网络中无限循环的转发下去. 简述arp缓存表的建立过程: ...