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是一款非常不 ...
随机推荐
- seq命令的使用
标题:seq命令的使用 作用:seq命令用于以指定增量从首数开始打印数字到尾数,即产生从某个数到另外一个数之间的所有整数,并且可以对整数的格式.宽度.分割符号进行控制 语法: [1] seq [选项] ...
- Python Treelib 多叉树 数据结构 中文使用帮助文档
树,对于计算机编程语言来说是一个重要的数据结构.它具有广泛的应用,比如文件系统的分层数据结构和机器学习中的一些算法.这里创建了treelib来提供Python中树数据结构的高效实现. 官方文档:htt ...
- shell的变量以及常见符号
shell的变量以及常见符号 常见变量 不同于其它语言需要先声明变量,shell的变量直接使用 eg: a=15 调用变量的话 $a 或者 ${a} $? #判断上一条命令执行的是否成功 0 ...
- 每天一道Rust-LeetCode(2019-06-04)
每天一道Rust-LeetCode(2019-06-04) 最长回文子串 坚持每天一道题,刷题学习Rust. 原题 题目描述 给定一个字符串 s,找到 s 中最长的回文子串.你可以假设 s 的最大长度 ...
- js toFixed() 四舍五入后并不是你期望的结果
小学的时候学数学就知道有一种叫四舍五入的计算方式,就是对于小数位数的取舍,逢五进一,比如1.225 取两位小数后就是1.23.在前端开发中自己也少不了这样的计算,js也提供了相关的方法--toFixe ...
- 【Mybatis】多个参数如何写xml和mapper
1:#{0},#{1} 不写parameterType 2:注解 @Param("id")String id 3:Map parameterType="hashma ...
- [LeetCode] 834. Sum of Distances in Tree 树中距离之和
An undirected, connected tree with N nodes labelled 0...N-1 and N-1 edges are given. The ith edge co ...
- [LeetCode] 172. Factorial Trailing Zeroes 求阶乘末尾零的个数
Given an integer n, return the number of trailing zeroes in n!. Example 1: Input: 3 Output: 0 Explan ...
- Error running 'xxx': Command line is too long. Shorten command line for xxx
跑单元测试时,报错如下: Error running 'xxx': Command line is too long. Shorten command line for xxx 解决方案: 在项目所在 ...
- C# HTTP系列3 HttpWebRequest.ContentType属性
系列目录 [已更新最新开发文章,点击查看详细] 获取或设置请求的 Content-type HTTP 标头的值.默认值为null. 常见的请求内容类型为以下几种: /// <summar ...