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是一款非常不 ...
随机推荐
- Golang调用Python
https://yq.aliyun.com/articles/117329 Python是时髦的机器学习御用开发语言,Golang是大红大紫的新时代后端开发语言.Python很适合让搞算法的写写模型, ...
- leetcode2. 两数相加
使用迭代的方式 class Solution{ public: ListNode *addTwoNumbers(ListNode* l1,ListNode *l2) { ListNode *res=) ...
- Fishing Master (思维+贪心)
题目网站:http://acm.hdu.edu.cn/showproblem.php?pid=6709 Problem Description Heard that eom is a fishing ...
- vue和react的区别
数据: vue:双向数据绑定和单向数据流.双向数据绑定:DOM元素绑定的data值,当发生改变后,vue的响应式机制会自动监听data的变化重新渲染.单向数据流:当父组件给子组件传递数据的时候,子组件 ...
- 关于RAMOS所用的操作系统
关于RAMOS所用的操作系统 RAMOS所用的操作系统,XP就不用说了,精简版最小的600MB到1.5GB的都有.现代意义上的WIN7/8/10 RAMOS一般选用精简版操作系统,节约内存的同时,还能 ...
- CSP前的板子
板子A(扩展欧几里得) 题目描述 求关于x的同余方程 ax≡1(modb) 的最小正整数解. 输入格式 一行,包含两个正整数 a,b,用一个空格隔开. 输出格式 一个正整数 x,即最小正整数解.输入 ...
- read articles list
done 如何通俗易懂地解释卷积: https://www.zhihu.com/question/22298352/answer/637156871 如何通俗易懂地理解卷积神经网路: http://w ...
- oracle--DG查询同步
查询归档历史: SELECT FIRST_TIME,FIRST_CHANGE#,NEXT_CHANGE#, SEQUENCE# FROM V$LOG_HISTORY; 检查归档文件路径和创建信息 SE ...
- [转载]3.14 UiPath图片操作截图的介绍和使用
一.截图(Take Screenshot)的介绍 截取指定的UI元素屏幕截图的一种活动,输出量仅支持图像变量(image) 二.Take Screenshot在UiPath中的使用 1.打开设计器,在 ...
- [Powershell]导出指定的定时计划任务
<# .NOTES =========================================================================== Created wit ...