关于Vue的URL转跳与参数传递方式

<-- 在a页面进行传值 -->
    
<router-link :to="{path: '/home', query: {key: 'hello', value: 'world'}}">
　　<button>跳转</button>
</router-link> 

<-- 在a页面进行传值 -->
    
<router-link :to="{name: '/home', params: {key: 'hello', value: 'world'}}">
　　<button>跳转</button>
</router-link>　　

this.$router.push({
　　path: '/detail',
　　query: {
　　　　name: 'admin',
　　　　code: 10021
　　}
});

js See(e) { window.location.href = e }

<router-link :to="{name:'page',params:{data:'我是App.vue传至page.vue的参数'}}" >page</router-link>

{{$route.params.data}}

<div @click="toPage">page</div>

toPage(){
      this.$router.push({
        name: 'page',
        params: {
          age: 22,
          address: 'China'
        }
      })
    }

<template>
	<div>
		{{myage}}-{{myaddress}}
	</div>
</template>

<script>
	export default {
		name: "page111",
		data() {
			return {
				myage: '',
				myaddress: ''
			}
		},
		mounted(){
			// 在挂载时接收到参数并且赋值
			this.myage = this.$route.params.age;
			this.myaddress = this.$route.params.address;
		},
	}
</script>

{
	path: '/page/:pageId/:pageTitle',
    name: 'page',
    component: page
}

<template>
  <div id="app">
    <img src="./assets/logo.png"><br/>
      <router-link to="/" >index</router-link>
      <router-link to="/page/1/标题" >page</router-link>
    <router-view/>
  </div>
</template>

<template>
	<div>
		<p>id: {{$route.params.pageId}}</p>
		<p>标题： {{$route.params.pageTitle}}</p>
	</div>
</template>

<template>
	<div>
		<p>我的组件 {{msg}}-{{content}}</p>
	</div>
</template>

<script>
	export default{
		name: 'child',
		props: ["msg","content"],
	}
</script>

<template>
	<div>
		<children></children>
	</div>
</template>

<script>
	import children from "./component";
	export default {
		name: "page",
		components: {
			children
		}
	}
</script>

// page.vue
<children msg="我是信息" content="我是内容"></children>

<children :msg="message" :content="content"></children>
<script>
	import children from "./component";
	export default{
		name: 'page',
		components: {
			children
		},
		data(){
			return {
				message: '我是信息',
				content: '我是内容'
			}
		}
	}
</script>

// component.vue
<p>我的组件 {{msg}}-{{content}}</p>

<script>
	export default{
		name: 'child',
		props: ["msg","content"]
	}
</script>

// component.vue
<script>
	export default{
		name: 'component',
		data() {
			return {
				param："需要传回的参数",
				data: "参数2"
			}
		},
		props: ["msg","content"],
		methods: {
			// 假设在子组件选择完毕后点击将 param 传回
			chooseOk(){
				// ...中间的逻辑处理省略
				this.$emit('changeData',this.param,this.data);
			}
		}
	}
</script>

<children :msg="msg" :content="content" @changeData="dataChange"></children>

<script>
	import children from "./component";
	export default {
		name: "page",
		components: {
			children
		},
		methods: {
			dataChange(param,data){
				console.log(param + ',' + data);
			}
		}
	}
</script>

// page.vue
<div @click="ifClick">click</div>
<children ref="child" :msg="msg" :content="content" @changeData="dataChange"></children>

// 重复部分省略 ...
methods: {
	ifClick(){
		this.$refs.child.isClick();
	}
}

// component.vue
methods: {
	isClick(){
		console.log("父组件点击了");
	}
}