代码片段-Vue 路由跳转

在页面 A有个按钮， 点击按钮后， 跳转到页面B， 并把A页面中的 content 数据， 带到 页面B

// 页面A
<template>
	<div>
    <el-form-item label="content" >
      <el-input v-model="form.content" type="textarea">
  		</el-input>	
  	</el-form-item>
	  <el-button @click="PreMergeConfig" type="success">跳转</el-button>
 </div>
</template>

<script>
  export default {
    name: "A",
    data(){
      return {
        form: {
          content: ""
        }
      }
    },
    methods:{
      PreMergeConfig(){
        // 跳转到 B 页面
        let self = this;
        self.$router.push({
          path: "/config/pageB",  // 完整的页面B 的路由
          query: {
            config: self.form.content   // 携带的参数
          }
        })
      }
    }
  }
</script>

// 页面B
<template>
	<div>
      <el-input v-model="form.content" type="textarea"></el-input>	
 </div>
</template>

<script>
	export default {
    name: "B",
    data(){
      return{
        content: ''
      }
    },
    
    created() {
      let self = this;
      self.getParams()
    },
    
    watch:{
      '$route': 'getParams'
    },
    
    getParams(){
        // 获取路由的参数
        let self = this;
        let config = self.$route.query.config;  // 跳转的时候，用query传参的， 接收的时候就用query来接收参数
        self.content = config
      }
    
    
  }
</script>

关于跳转的时候传参， 除了例子中的query 方式，还可以通过 params 的方式：

this.$router.push({
  name: 'pageB',  // 路由的名称
  params: {
    config: ""
	}
})