路由学习之路由传参

最新推荐文章于 2022-10-09 16:14:45 发布

实习期小潘

最新推荐文章于 2022-10-09 16:14:45 发布

阅读量597

点赞数 2

分类专栏：笔记文章标签：学习前端 vue

本文链接：https://blog.youkuaiyun.com/m0_60264901/article/details/124186743

版权

笔记专栏收录该内容

27 篇文章

订阅专栏

本文通过案例介绍Vue中路由参数的传递方式，包括query参数、命名路由、params参数、props配置以及router-link的replace属性的使用，帮助读者深入理解路由在实际应用中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

根据案例来学习是最好的学习方法，能够将所学的知识运用到案例中

练中学，学中练

那我们就话不多说就来学习一下路由中是如何传参的！

案例效果

使用到的参数

query参数

书写方法一：

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

</router-link>  

其中？后面的id=${m.id}&title=${m.title}就是可以传递给网页的参数，如图：

书写方法二：（更推荐）



<router-link :to="{

path:'/home/message/detail',

query:{

id:m.id,

title:m.title

}

}">

{{m.title}}

</router-link>

本案例中的路由是Detail.vue，它里面的代码如下：

<template>
	<ul>
		<li>消息编号：{{$route.query.id}}</li>
		<li>消息标题：{{$route.query.title}}</li>
	</ul>
</template>

<script>
	export default {
		name:'Detail',
		mounted() {
			console.log(this.$route)//this.$route可以得到Detail.vue这个组件相关的配置信息
		},
	}
</script>

✨注意：this.$route可以得到Detail.vue这个组件相关的配置信息。

命名路由

使用方法如下：

Step1:

{
	path:'/demo',
	component:Demo,
	children:[
		{
			path:'test',
			component:Test,
			children:[
				{
                      name:'hello' //给路由命名
					path:'welcome',
					component:Hello,
				}
			]
		}
	]
}

Step2:

<!--写法1：简化前，需要写完整的路径 -->
<router-link to="/demo/test/welcome">跳转</router-link> //to 后面写的是路径


<!--写法2：简化后，直接通过名字跳转 -->
<router-link :to="{name:'hello'}">跳转</router-link>    //这里的to前面需要加冒号：

<!--简化写法配合传递参数 -->
<router-link 
	:to="{
		name:'hello',
		query:{
		   id:666,
            title:'你好'
		}
	}"
>跳转</router-link>

params参数

使用方法如下：

Step1:配置路由，声明接收params参数

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

Step2:传递参数

<!-- 写法1：跳转并携带params参数，to的字符串写法 -->
<router-link :to="/home/message/detail/666/你好">跳转</router-link>
				
<!-- 写法2：跳转并携带params参数，to的对象写法 -->
<router-link 
	:to="{
		name:'xiangqing', 
  //注意当用params传递参数时，若使用to的对象写法，这里不能使用path配置项必须用name配置项！
		params:{
		   id:666,
            title:'你好'
		}
	}"
>跳转</router-link>

props配置

作用：可以了解路由组件Detail.vue是如何读取它的参数的，让路由组件更方便的收到参数。

//在路由Deatil.vue中这么写
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',
                        component: Detail,

//props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给Detail组件。（这样的话数据都是死的）
                        // props:{a:1,b:'hello'}

//props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件。
                        // props:true
//props的第三种写法，值为函数--这种最强大
                        props($route) { //$route是回调函数
                            return {
                // id:'666',title:'你好啊',这样写的话就会把数据写死了
                                id: $route.query.id,
                                title: $route.query.title,
                                a: 1,
                                b: 'hello'
                            }
                        }

                    }]
                }
            ]
        }
    ]
})

router-link的replace属性

作用：控制路由跳转时操作浏览器历史记录的模式。
浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push。
开启replace的模式方法：<router-link replace .......>News</router-link>

在Home.vue中写入replace

<template>
	<div>
		<h2>Home组件内容</h2>
		<div>
			<ul class="nav nav-tabs">
				<li>
					<router-link replace class="list-group-item" active-class="active" to="/home/news">News</router-link>
				</li>
				<li>
					<router-link replace class="list-group-item" active-class="active" to="/home/message">Message</router-link>
				</li>
			</ul>
			<router-view></router-view>
		</div>
	</div>
</template>

如下图理解，当我们点击返回按钮是会回到8080/#/about