vue 利用路由跨页传参
第一页,点击进入第二页进行传值:
<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 利用路由跨页传参的更多相关文章
- Vue Router路由导航及传参方式
路由导航及传参方式 一.两种导航方式 ①:声明式导航 <router-link :to="..."> ②:编程式导航 router.push(...) 二.编程式导航参 ...
- Vue之路由跳转 传参 aixos 和cookie
一.路由跳转 1.1 项目的初始化 vue create m-proj >>>创建vue项目 精简vue项目的 views 视图 About(基本是删除的) Home.(可以 ...
- vue中的路由传参及跨组件传参
路由跳转 this.$router.push('/course'); this.$router.push({name: course}); this.$router.go(-1); this.$r ...
- vue 组件传参及跨域传参
可以完成跨组件传参的四种方式 // 1) localStorage:永久存储数据 // 2) sessionStorage:临时存储数据(刷新页面数据不重置,关闭再重新开启标签页数据重置) // 3) ...
- vue路由(一个包含重定向、嵌套路由、懒加载的main.js如下)and 路由跳转传参的query和params的异同
import Vue from 'vue'import VueRouter from 'vue-router'import App from './App'Vue.use(VueRouter)cons ...
- 微信小程序~跳页传参
[1]需求: 点击商品,跳到相应商品详情页面 [2]代码: (1)商品列表页 <view class="goodsList"> <view wx:for=&quo ...
- js 实现vue—引入子组件props传参
参考:https://www.cnblogs.com/xiaohuochai/p/7388866.html 效果 html <!DOCTYPE html> <html> < ...
- dolphinscheduler简单任务定义及复杂的跨节点传参
dolphinscheduler简单任务定义及跨节点传参 转载请注明出处 https://www.cnblogs.com/funnyzpc/p/16395094.html 写在前面 dolphinsc ...
- Apache DolphinScheduler 简单任务定义及复杂的跨节点传参
点亮 ️ Star · 照亮开源之路 GitHub:https://github.com/apache/dolphinscheduler Apache DolphinScheduler是一款非常不 ...
随机推荐
- linux open 黄色文件
表示设备文件 生成的新的pdf
- java+selenium元素定位和元素操作
1.元素定位 ID定位元素: findElement(By.id(“”)); 通过元素的名称定位元素: findElement(By.name(“”)); 通过元素的html中的位置定位元素: fin ...
- web框架--tornado之cookie与session初识
cookie的本质其实就是在浏览器端保存的键值对, 每当浏览器端发送一次请求, 都会将这些键值对附加在请求中并发送给服务器端. 一.目录结构 二.main_pro.py #!/usr/bin/env ...
- 洛谷 P1209 [USACO1.3]修理牛棚 Barn Repair题解
题目 打死我也没想到是贪心 虽然是lkx写了贪心题解让我去点赞我才写的这道题 神仙思路 首先排好序 假设我们现在只有一块木板 我们做一个差分数组 对这个差分数组排序之后 一次断开最长的区间 m-1次之 ...
- Educational Codeforces Round 70 题解
噩梦场. 题目出奇的难,好像一群外国老哥看 A 看着看着就哭了-- A 找到 \(b\) 最低的 \(1\),这个 \(1\) 肯定要跟 A 中的一个 \(1\) 搭配,而且是能搭配的 \(1\) 中 ...
- [LeetCode] 130. Surrounded Regions 包围区域
Given a 2D board containing 'X' and 'O'(the letter O), capture all regions surrounded by 'X'. A regi ...
- 从Java官网下载最新的文档(包含API文档)
Java学习资料(适合c转java的同学): Java中带包(创建及引用)的类的编译 - 小明快点跑 JAVA 对象引用,以及对象赋值 - 飘来荡去. Java官网下载页:https://www.or ...
- 黑客最喜欢的15个Nmap扫描命令,熟练掌握你也能成为黑客大神
1.针对IP或主机的基本Nmap扫描 nmap IP 现在,如果要扫描主机名,只需替换主机的IP,如下所示: nmap 域名 2.扫描本地或远程服务器上的特定端口或扫描整个端口范围 nmap -p 1 ...
- JAVA基础系列:内部类获取外部类的成员变量
内部类获取外部类的成员变量,使用 外部类类名.this.变量名 的形式获取 public class Outer { public String name = "outer"; c ...
- 主流的单元测试工具之-JAVA新特性-Annotation
1:什么是Annotation?Annotation,即“@xxx”(如@Before,@After,@Test(timeout=xxx),@ignore),这个单词一般是翻译成元数据,是JAVA的一 ...