Vue入門034- 路由傳遞參數（params參數）

params 參數，其實就是把參數寫在路由位址上

details:id:titie這就是params參數

在 Vue入門032- 路由傳遞參數（query參數）的基礎上修下router/index.js檔案。改成params參數傳遞方式

router/index.js

// 該檔案專門用于建立整個應用的路由器
import VueRouter from 'vue-router'
//引入元件
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'

//建立并暴露一個路由器
export default new VueRouter({
	routes:[
		{
			name:'guanyu',
			path:'/about',
			component:About
		},
		{
			path:'/home',
			component:Home,
			children:[
				{
					path:'news',
					component:News,
				},
				{
					path:'message',
					component:Message,
					children:[
						{
							name:'xiangqing',
							path:'detail/:id/:title',
							component:Detail,
						}
					]
				}
			]
		}
	]
})
           

關鍵代碼 31行 name:'xiangqing',

路由攜帶params參數時，若使用to的對象寫法，則不能使用path配置項，必須使用name配置！

關鍵代碼 32行 path:'detail/:id/:title',

:id 了解為占位符

:title 了解為占位符

Message.vue 元件

<template>
	<div>
		<ul>
			<li v-for="m in messageList" :key="m.id">
				<!-- 跳轉路由并攜帶params參數，to的字元串寫法 -->
				<!-- <router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link>   -->

				<!-- 跳轉路由并攜帶params參數，to的對象寫法 -->
				<router-link :to="{
					name:'xiangqing',
					params:{
						id:m.id,
						title:m.title
					}
				}">
					{{m.title}}
				</router-link>
			
			</li>
		</ul>
		<hr>
		<router-view></router-view>
	</div>
</template>

<script>
	export default {
		name:'Message',
		data() {
			return {
				messageList:[
					{id:'001',title:'消息001'},
					{id:'002',title:'消息002'},
					{id:'003',title:'消息003'}
				]
			}
		},
	}
</script>           

跳轉路由并攜帶params參數，to的字元串寫法

<router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link>           

跳轉路由并攜帶params參數，to的對象寫法

<router-link :to="{
name:'xiangqing',
params:{
id:m.id,
title:m.title
}
}">
{{m.title}}
</router-link>           

Detail.vue 元件

<template>
	<ul>
		<li>消息編号：{{$route.params.id}}</li>
		<li>消息标題：{{$route.params.title}}</li>
	</ul>
</template>

<script>
	export default {
		name:'Detail',
		mounted() {
			// console.log(this.$route)
		},
	}
</script>           

接收參數

{{$route.params.id}}

{{$route.params.title}}

路由的params參數總結

1. 配置路由，聲明接收params參數

{
   	path:'/home',
   	component:Home,
   	children:[
   		{
   			path:'news',
   			component:News
   		},
   		{
   			component:Message,
   			children:[
   				{
   					name:'xiangqing',
   					path:'detail/:id/:title', //使用占位符聲明接收params參數
   					component:Detail
   				}
   			]
   		}
   	]
}           

2.傳遞參數

跳轉并攜帶params參數，to的字元串寫法

<router-link :to="/home/message/detail/666/你好">跳轉</router-link>           

跳轉并攜帶params參數，to的對象寫法

<router-link 
   	:to="{
   		name:'xiangqing',
   		params:{
   		   id:666,
               title:'你好'
   		}
   	}"
>跳轉</router-link>           

特别注意：路由攜帶params參數時，若使用to的對象寫法，則不能使用path配置項，必須使用name配置！

3. 接收參數：

$route.params.id
$route.params.title           

代碼摘錄于尚矽谷Vue學習課件