本文主要讲述：关于vue.js 编程导航，如何传递参数？

本文主要讲述：通过vue.js 编程导航，实现路由配置和跳转页面的功能！

基础篇，仅作为简单演示。

总结

不能保证用户一定会点击某些按钮
并且当前操作，除了路由跳转以外，还会有一些别的附加操作（比如执行完了再跳转）
通过 this.$router.go，根据浏览器记录，完成 前进、后退【即：翻页功能】
通过this.$router.push，实现了直接跳转到某个页面的显示【即：直接跳转到指定页面】
---- push参数：字符串 /xxx
---- 对象：{name:]xxx'}

效果预览：

相关文件代码如下：

2. app.vue文件

<template><div><div class="header">头部 - 导航栏目</div><!--留坑，非常重要--><router-view class="main"></router-view><button @click="goMuisc">跳转到音乐</button><button @click="testParams">使用编程导航，进行参数传递</button><div class="footer">底部 - 版权信息</div></div>
</template><script>export default {data(){return{}},methods:{goMuisc(){//第一种跳转方法this.$router.push('/music_country');  //此处的名称必须和main.js路由规则配置的path值一致},testParams(){//查询字符串的方式，比如  /music_country?id=1&name=2this.$router.push({name:'music',query:{id:1,name:2}});}}}
</script><style scoped>.header,.main,.footer{text-align: center;padding: 10px;}.header{height:70px;background: yellowgreen;}.main{height:300px;background: skyblue;}.footer{height: 100px;background: hotpink;}
</style>

其他相关文件

请参考：vue.js 编程导航，如何传递参数?

序号	文章 / 链接
1	如何使用router-link对象方式传递参数？
2	vue.js 编程导航如何传递参数
3	vue-router配置介绍和使用方法（一）
4	vue-router配置介绍和使用方法（二）
5	vue-router配置介绍和使用方法（三）

以上就是关于”vue.js 编程导航，如何传递参数？“的全部内容。

vue.js 编程导航，如何传递参数？相关推荐

关于vue.js 编程导航的使用：实现路由配置和跳转页面
本文主要讲述:通过vue.js 编程导航,实现路由配置和跳转页面的功能! 基础篇,仅作为简单演示. 总结不能保证用户一定会点击某些按钮并且当前操作,除了路由跳转以外,还会有一些别的附加操作(比如执 ...
解决JS在url中传递参数时参数包含中文乱码的问题
解决JS在url中传递参数时参数包含中文乱码的问题参考文章: (1)解决JS在url中传递参数时参数包含中文乱码的问题 (2)https://www.cnblogs.com/xushengguan/ ...
Vue入坑——vue-router如何传递参数
2019独角兽企业重金招聘Python工程师标准>>> 上一篇:vue-router配置子路由一起学vue--vue学习总路线 ----------^~^我是萌萌哒分割线^~^-- ...
vue axios 发送get请求传递参数给后端失败_Java之Vue插件之Axios
Java之Vue插件之Axios,环境安装: npm install --save axios vue-axios //安装axios Npm install //安装依赖在main.js中注册 i ...
axios java 参数,vue.js axios发请求时,参数包括dto和一个flag, 后台如何接?
1.vue.js使用axios向后台发请求. 传递参数中包含一个object,一个string. object到后台用javaBean接, String到后台用String接. 2.前台代码遇新是直朋 ...
vue js前端根据所需参数生成二维码并下载
需要一个插件 qrcodejs2, 使用 npm install qrcodejs2 --save 下载该依赖包. 在vue中引入(我这边是vue2).import QRCode from 'qrco ...
jsp页面页面post传值_在Js页面通过POST传递参数跳转到新页面详解
场景最近在工作中遇到一个需求,有个页面 a.vm,对 ajax 请求的结果进行判断后,获取结果里面的数据传递给一个 URL(b.htm),跳转到新的页面 b.htm. 遇到的问题因为一开始是 GE ...
vue 跳转新窗口传递参数并改变窗口名称
需求: 地址不带参数获取之前的数据修改窗口名称点击跳转组件 const msg = {zoom :map.getZoom()-0.5,lat: map.getCenter().lat,dataL ...
php向js的函数内传递参数-用经纬度计算2点间的距离
有时候需要从php传递数据到js,这时候该怎么办呢?实例;php微信开发,用经纬度计算2点间的距离,2个坐标分别从php和js获得. 基于tp5框架的开发. 说一下注意事项: 1.php实际不能直接传 ...

vue.js 编程导航，如何传递参数？

本文主要讲述：关于vue.js 编程导航，如何传递参数？

总结

效果预览：

相关文件代码如下：

2. app.vue文件

其他相关文件

相关文章

vue.js 编程导航，如何传递参数？相关推荐

最新文章

热门文章