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配置介绍和使用方法（三）