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

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

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

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

---

总结

1. 不能保证用户一定会点击某些按钮
2. 并且当前操作，除了路由跳转以外，还会有一些别的附加操作（比如执行完了再跳转）
3. 通过 this.$router.go，根据浏览器记录，完成 前进、后退【即：翻页功能】
4. 通过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=2
	  		this.$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 编程导航，如何传递参数？“的全部内容。