VUERouter--传递参数

传递参数

官方文档

https://v3.router.vuejs.org/zh/guide/essentials/passing-props.html

VueRouter路由中传递参数，主要包含两种数据参数传输方式：

• 动态路由：将参数包含在url地址中进行传递，如：/udetail/12，传递的数据12
• 查询字符串：将参数拼接到url地址末尾进行传递，如：/udetail?id=12，传递的数据id=12

（1） 动态路由传递参数

① 路由规则

{
    name: 'userdetail',
	path: '/udetail/:id/:name',            // url路径中包含了一个id变量占位的数据,
    component: UsersDetail			// 对应显示的组件
}

② 发起链接

<router-link :to="'/udetail/' + user.id + '/' + user.name">查看详情</router-link>
<!-- 用户点击时，请求链接：/udetail/1 -->

<router-link :to="{name: 'userdetail', params: {id: user.id, name: user.name}}">查看详情</router-link>
<!-- 用户点击时，请求链接：/udetail/2 -->

③ 接受数据

<template>
	<p>
        标签中直接写接受的数据：{{ $route.params.id }} {{ $route.params.name }}
    </p>
</template>
<script>
export default {
    created() {
        // 声明周期中接受数据
        console.log(this.$route.params.id, this.$route.params.name)
    }
}
</script>

• 上述代码中，通过$route可以接受动态路由传递的参数，但是存在这样的问题：Vue组件中出现了$route路由代码，属于VueRouter路由模块的语法代码，这样的访问数据方式耦合度较高

④ 解耦合接受数据【推荐】

（1）重新声明路由规则

{
    name: 'userdetail',
    path: '/udetail/:id/:name',
    component: UsersDetail,
    
    props: true 
    // 将动态路由参数，解析成当前组件的自定义属性传递
}

（2）发起链接保持不变

<router-link :to="'/udetail/' + user.id + '/' + user.name">查看详情</router-link>
<!-- 用户点击时，请求链接：/udetail/1 -->

<router-link :to="{name: 'userdetail', params: {id: user.id, name: user.name}}">查看详情</router-link>
<!-- 用户点击时，请求链接：/udetail/2 -->

（3）接受数据的方式UsersDetail.vue：

<template>
	<div>
        <p>
            接受用户的数据：{{ id }} ：  {{ name }}
    	</p>
    </div>
</template>
<script>
export default {
    props: ['id', 'name']
}
</script>

（2）查询字符串

① 配置路由规则

...
import MenusDetail from '../pages/MenusDetail'
...
{
    name: 'main',
    path: '/main',
    component: Main,
    children: [
        ...
        {
            name: 'menusdetail',
            path: '/mdetail',				// 这里配置路由时，忽略?后面拼接的查询字符串
            component: MenusDetail
        }
    ]
}

② 发起链接

<router-link :to="'/mdetail?id=' + menu.id + '&name=' + menu.name">
    查看菜单详情
</router-link>
<!-- 用户点击后，发起的请求：/mdetail?id=1&name=首页 -->

<router-link :to="{name: 'menusdetail', query:{id: menu.id, name: menu.name}}">
    查看菜单详情
</router-link>
<!-- 用户点击后，发起的请求：/mdetail?id=2&name=商品管理 -->

③ 接受数据

<template>
	<p>
        页面接受数据: {{ $route.query.id }} {{ $route.query.name }}
    </p>
</template>
<script>
export default {
    created() {
        console.log("生命周期中接受数据：", this.$route.query.id, this.$route.query.name)
    }
}
</script>

④ 解耦合传递方式

改造：路由规则，src/router/index.js

...
{
    name: 'menusdetail',
    path: '/mdetail',
    component: MenusDetail,
   // 将路由组件传递的查询字符串参数，解析成当前组件的自定义属性传递
    props: route=> ({id: route.query.id, name:route.query.name})
}
...

改造：路由组件MenusDetail.vue接受数据

<template>
	<div>
        菜单编号：{{ id }}
        菜单名称：{{ name }}
    </div>
</template>

<script>
export default {
    props: ['id', 'name']
}
</script>