vue 页面跳转传参
页面之间的跳转传参,正常前端js里写 window.location.href="xxxxx?id=1" 就可以了;
但是vue不一样 需要操作的是路由history,需要用到 VueRouter,
示例:
常用的场景是:列表页点击“查看”按钮,跳转到详情页。
在列表页(list.vue)按钮点击事件里写上
detail(row) {
this.$router.push({ path: "detail", query: { id: row.id } });
},
运行时浏览器地址栏展示:
http://localhost:8080/#/orders/detail?id=31
在详情页(detail.vue)里写上
let id = Number(this.$route.query.id);
即可获取到参数id了。
解析
先看看 $router 和$route是什么,在vscode f12后
看到
declare module "vue/types/vue" {
interface Vue {
$router: VueRouter;
$route: Route;
}
}
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。
VueRouter官网 传送门
route是一个跳转的路由对象,每一个路由都会有一个route对象,是一个局部的对象,可以获取对应的name,path,params,query等
其中
- params
{}对象,包含路由中的动态片段和全匹配片段的键值对 用来实现 /order.detail/1 - query
{}对象,包含路由中查询参数的键值对。 用来实现 /order/detail?id=1
vue 页面跳转传参的更多相关文章
- vue页面跳转传参
跳转页 this.$router.push({name:'路由命名',params:{参数名:参数值,参数名:参数值}}) 接收页 this.$route.params.参数名
- 小程序页面跳转传参-this和that的区别-登录流程-下拉菜单-实现画布自适应各种手机尺寸
小程序页面跳转传参 根目录下的 app.json 文件 页面文件的路径.窗口表现.设置网络超时时间.设置多 tab { "pages": [ "pages/index/i ...
- js实现静态页面跳转传参
最近有个项目: 存静态web服务,一个新闻页面列表出所有新闻摘要信息,然后通过点击新闻详情访问到该新闻的详情页面: 新闻展示的页面通过ajax请求接口获取到新闻的摘要信息,预计想通过id的方式访问到新 ...
- 【转】request和response的页面跳转传参
下面是一位园友的文章: jsp或Servlet都会用到页面跳转,可以用 request.getRequestDispatcher("p3.jsp").forward(request ...
- vue路由跳转传参的两种方法
路由跳转: this.$router.push({ name: '工单列表', params: {p_camera_dev_name: 'xxx'} }); 使二级菜单呈点击状态: $('[index ...
- vue具体页面跳转传参方式
1.写数据,可以使用“.”,”[]”,以及setItems(key,value);3种方式. 例如: localStorage.name = proe;//设置name为" proe &qu ...
- 微信小程序页面跳转传参
1.传递参数方法 使用navigatior组件 <navigator url="/pages/pull/pull?title=lalla&name=cc" hov ...
- 微信小程序页面跳转传参方式
//实现跳转的A页面 jump: function () { let a = 1; let b = 2; wx.navigateTo({ url: '/page/vipOrder/vipOrder?d ...
- 小程序页面跳转传参参数值为url时参数时 会出现丢失
当参数的值为url的时候, ?号 _ 下划线 等等 都会被 截取掉,看不到, 这样在 另一个页面 options中 截取的url就不完全 let url="http://ba ...
随机推荐
- Css3动画效果,彩色文字效果,超简单的loveHeart
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Cs ...
- collection介绍
1.collection介绍 在mongodb中,collection相当于关系型数据库的表,但并不需提前创建,更不需要预先定义字段 db.collect1.save({username:'mayj' ...
- viewpager+fragment结合
public class MainActivity extends AppCompatActivity implements View.OnClickListener { private ViewPa ...
- 算法与数据结构基础 - 双指针(Two Pointers)
双指针基础 双指针(Two Pointers)是面对数组.链表结构的一种处理技巧.这里“指针”是泛指,不但包括通常意义上的指针,还包括索引.迭代器等可用于遍历的游标. 同方向指针 设定两个指针.从头往 ...
- npm命令无响应
npm命令完全无反应,不是加载的那种状态 而是下标不停地在哪里闪... 之后找解决方案,说要删除npmrc文件. 强调:不是nodejs安装目录npm模块下的那个npmrc文件 而是在C:\Users ...
- Groovy语法基础
Groovy 简介 Groovy 是一种基于 JVM 的动态语言,他的语法和 Java 相似,最终也是要编译 .class 在JVM上运行. Groovy 完全兼容 Java 并且在此基础上添加了很多 ...
- input样式重置(outline:none)
我们在写表单的时候,经常需要自定义表单的样式,当然input输入框也不例外,那么如何能写出好看一点的输入框呢? 例如简单的三个空按钮: <input type="button" ...
- CSS3 transform封装
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- egret之红包满屏随意飘动
在做这个需求之前,我们假设屏幕上同时飘动的红包数最大为10 ) { let redBag = GameUtil.createBitmapByName("Red_bag_png"); ...
- switch语句(上)(转载)
switch语句是C#中常用的跳转语句,可以根据一个参数的不同取值执行不同的代码.switch语句可以具备多个分支,也就是说,根据参数的N种取值,可以跳转到N个代码段去运行.这不同于if语句,一条单独 ...