Vue中路由的传参

最新推荐文章于 2024-03-21 16:57:53 发布

张侦毅

最新推荐文章于 2024-03-21 16:57:53 发布

阅读量420

点赞数

分类专栏： Vue Vue 文章标签： Vue 传参登录与注册

本文链接：https://blog.csdn.net/ZZY1078689276/article/details/83827530

版权

本文介绍了在Vue项目中如何进行路由传参，通过`params`关键字传递参数对象。示例展示了从首页跳转到欢迎页，注册页到登录页的过程，以及如何在目标页面接收并使用传递的参数，如用户账号。在跳转过程中，`router.push`用于携带参数，而`this.$route.params`用于获取参数。

摘要由CSDN通过智能技术生成

在项目开发中，需要用到路由传参的地方往往很多，比如说根据新闻列表页面查询新闻详情，此时我们就需要将该条新闻的id信息传递给新闻详情页面。

而在vue-router中，传参所用的关键字为query，其后跟参数map对象。

示例

源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-router</title>
</head>
<body>
<template id="root">
    <div>
        <!--路由占位-->
        <router-view></router-view>
    </div>
</template>
<template id="register">
    <div>
        <h2>注册页面</h2>
        <input type="text" v-model="uname">
        <button @click="registerMethod">注册</button>
    </div>
</template>
<template id="login">
    <div>
        &l