【vue】Vue Router路由组件传参的几种方式

在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。通过props将组件和路由解耦，使得该组件更易于重用和测试

 我们都知道，vue中父组件和子组件之间可以通过props传递数据。同样的，在路由中，也可以把路由上的参数传递给组件，具体有三种方式：1）布尔模式； 2）对象模式；3）函数模式。

1.布尔模式

router->index.js

 { path: '/hello/:name', component: Hello, props: true }, 

App.vue

<button><router-link to="/hello/you">hello/you</router-link></button>

 

结果：Helloyou【Hello {{name}}】

2.对象模式

router->index.js

 { path: '/static', component: Hello, props: { name: 'world' }}, 

App.vue

<button><router-link to="/static">static</router-link></button>

结果：Helloworld【Hello {{name}}】

3.函数模式

router->index.js

 { path: '/dynamic/:years', component: Hello, props: dynamicPropsFn },

App.vue

	<button><router-link to="/dynamic/1">dynamic/1</router-link></button>

结果：Hello2021!【Hello {{name}}】

router->index.js部分代码

function dynamicPropsFn (route) {
  const now = new Date()
  return {
    name: (now.getFullYear() + parseInt(route.params.years)) + '!'
  }
}

const routes = [
    { path: '/', component: Hello }, 
    { path: '/hello/:name', component: Hello, props: true }, 
    { path: '/static', component: Hello, props: { name: 'world' }}, 
    { path: '/dynamic/:years', component: Hello, props: dynamicPropsFn },
]

 App.vue部分代码

<template>
	<div id="app">
		<div>
			<button><router-link to="/">/</router-link></button>
			<button><router-link to="/hello/you">hello/you</router-link></button>
			<button><router-link to="/static">static</router-link></button>
			<button><router-link to="/dynamic/1">dynamic/1</router-link></button>
		</div>
		<router-view></router-view>
	</div>
</template>

Hello.vue(三种模式共用) 

<template>
	<div>
		<h1>Hello{{name}}</h1>
	</div>

</template>

<script>
	export default{
	 props: {
	    name: {
	      type: String,
	      default: 'Vue!' //默认值
	    }
	  }
	}
</script>

<style>
</style>

官方完整例子：https://github.com/vuejs/vue-router/tree/dev/examples/route-props