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是一款非常不 ...
随机推荐
- 2019面向对象程序设计(Java) 第17周-18周学习指导及要求
2019面向对象程序设计(Java)第17周-18周学习指导及要求 (2019.12.20-2019.12.31) 学习目标 (1) 理解和掌握线程的优先级属性及调度方法: (2) 掌握线程同步的 ...
- 201871010110-李华《面向对象程序设计(java)》第十四周学习总结
博文正文开头格式:(2分) 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.co ...
- 201871010134-周英杰 《面向对象程序设计(java)》第十二周学习总结
201871010134-周英杰 <面向对象程序设计(java)>第十二周学习总结 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ ...
- Sharding-JDBC 学习资料
学习资料 网站 官网 https://shardingsphere.apache.org/document/current/cn/manual/sharding-jdbc/ 基于 Docker 的 M ...
- nginx 常见的问题
1.server匹配优先级 nginx 读取文件名是按照文件排序优先读取的顺序 对与一样的server 优先使用先读取到的 2.location匹配优先级 = 进行普通字符精确匹配,也就是 ...
- Mysql-多表数据记录查询
多表数据记录查询 一.关系数据操作 并(UNION) 并就是把具有相同字段数目和字段类型的表合并到一起 笛卡尔积(CARTESIAN PRODUCT) 笛卡尔积就是没有连接条件表关系返回的结果. 内连 ...
- LG2598/BZOJ1412 「ZJOI2009」狼和羊的故事 最小割
问题描述 LG2598 BZOJ1412 题解 看到要把狼和羊两个物种分开 自然想到最小割. 发现\((x,y)\)可以向上下左右走以获得贡献,所以建边:\((x,y),(x-1,y)\),\((x, ...
- 启动hadoop后jps没有namenode,并且启动报错9000
启动hadoop报错: 解决方法: 我发现没有9000端口被占用,也不知道9000到哪去了,但是也没有NameNode,于是,直接把NameNode格式化了,再重启HDFS即可. 格式化命令:
- AWS云部署项目——数据库与服务器
1.连接数据库 选择服务RDS,进入后点击数据库实例,在之前建好的数据库内进行操作 首先是安全组,类似于aws云上的防火墙一样的东西,先设置好公开性,安全组置为default(就是尽量避免测试时访问阻 ...
- 集合 List ,Set
https://www.cnblogs.com/jmsjh/p/7740123.html