路由传参——vue路由（三）

定义

路由都指向同一个组件，由于权限的不同或不同组件进入一个"共用"的组件，需要渲染不同的数据。这时需要根据组件携带的参数提取不同的数据，前端页面切换时进行参数传递是开发中最基本业务需求，如父组件需要将要显示的记录的ID传递给子组件。
动态路由的传参仅局限于嵌套路由时父路由向子路由传递参数，否则操作无效。传参方式可以划分为params传参和query传参，params传参又可以分为url中显示参数和不显示参数两种方式。

使用router配置

【例】父组件在调用子组件时，将携带的参数在子组件中显示。

1. 使用param传参，在URL显示参数，父组件parent.vue的代码如下：

<template>
	<div class="hello">
		<h1>{{ msg }}</h1>
		<p><router-link to='/child/01'>子页面</router-link></p>
		<router-view></router-view>
	</div>
</template>

<script>
export default {
		name: 'parent',
		data() {
			return {
				msg: 'parentPage'
			}
		},
	}
</script>

<style>
</style>

在父组件中，通过path进行传参，to=’/child/01’形式将参数传递给子组件。

子组件（child.vue）代码如下：

<template>
	<div class="hello">
	   <h2>{{msg}} - {{$route.params.username}}</h2>
	</div>
</template>

<script>
	export default {
		name: "Child",
		data() {
			return {
				msg: "Welcome to One!",
			};
		}
	};
</script>

子组件通过$route.params.username接收传递过来的参数。

修改路由器js文件，代码如下

import Vue from 'vue'
import Router from 'vue-router'
import parent from '@/view/parent.vue'
import child from '@/view/child.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      component: parent
    },
    {
      path:'/child/:username', //path带参数
      component:child
    }
  ]
})

在路由中使用 path:’/child/:username’传递形参，使用“：”
运行结果如下：

在url地址栏显示相应的路径及参数。

2. 使用param传参，在URL不显示参数，子组件保持不变，路由器给路由增加name属性，通过param完成传参。其父组件代码如下

<template>
	<div class="hello">
		<h1>{{ msg }}</h1>
		<p><router-link :to="{name:'child',params:{username:'01'}}">子页面</router-link></p>
		<router-view></router-view>
	</div>
</template>

<script>
export default {
		name: 'parent',
		data() {
			return {
				msg: 'parentPage'
			}
		},
	}
</script>

<style>
</style>

在此使用路由中提供的name，使用params:{username:‘01’}完成传参。router.js增加name属性修改如下

import Vue from 'vue'
import Router from 'vue-router'
import parent from '@/view/parent.vue'
import child from '@/view/child.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      component: parent
    },
    {
      path:'/child', //路由配置的时候path不用带参数
      name:'child',
      component:child
    }
  ]
})

其余组件代码不变，运行结果如下：

在url中不显示参数。但存在问题当刷新页面的时候，传递的值会丢失。如：刷新页面，如下图显示

3. 使用query传参，与param不在url使用方式很类似，但刷新页面数据不会丢失。parent.vue代码如下

<template>
	<div class="hello">
		<h1>{{ msg }}</h1>
		<p><router-link :to="{name:'child',query:{username:'01'}}">子页面</router-link></p>
		<router-view></router-view>
	</div>
</template>

<script>
export default {
		name: 'parent',
		data() {
			return {
				msg: 'parentPage'
			}
		},
	}
</script>

<style>
</style>

这里 :to="{name:‘child’,query:{username:‘01’}}">，参数由params更改为query。也可以使用<router-link :to="{path:’/child’,query:{username:‘01’}}"，子组件代码如下：

<template>
	<div class="hello">
	   <h2>{{msg}} - {{$route.query.username}}</h2>
	</div>
</template>

<script>
	export default {
		name: "Child",
		data() {
			return {
				msg: "Welcome to One!",
			};
		}
	};
</script>

获取值使用{{$route.query.username}}方式获取。
路由器类代码修改为：

import Vue from 'vue'
import Router from 'vue-router'
import parent from '@/view/parent.vue'
import child from '@/view/child.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      component: parent
    },
    {
      path:'/child', //使用query传参，路由配置的时候path不用带参数
      name:'child',
      component:child
    }
  ]
})

运行结果如下

使用query时连接符号为“？”，param使用路径时“/”

拓展

路由传参形式还可以使用rotuter对象提供的push方法，在单击事件完成。如：query传参中this.$router.push({name:‘details’,query:{id:123}})等同于页面。