最新版vue3+TypeScript开发入门到实战教程之路由详解三

angerdream2026-03-27 17:53

上节内容是嵌套路由与路由传参。路由的传参有两方式，一是query，一是params。这节主要内容：

  • 路由的props
  • 路由的replace属性
  • 路由编程式导航
  • 路由的重定向

1、 什么是路由的props

前几节详细讲解组件的props，父组件给子组件传递参数，就是通过props。如下例：父组件将变量fish、price传递给子组件fish

ruby 复制代码 
<Fish :name="fish" :price="price"/>

子组件通过defineProps接收参数，可在模版中直接使用

xml 复制代码 
<template>
  <h2>我是子组件</h2>
  <h3>{{ name }}</h3>
  <h3>{{ price }}</h3>
</template>
<script setup lang="ts">
defineProps(['name', 'price']);
</script>

1.1路由的props

路由传参有两种方式，一是通过query，一是通过params，props就是第三种方式。用户通过点击router-link标签时，会跳转到对应的路由，此时组件被创建。是路由创建的组件。以下是路由的props的含义： 路由在创建组件时，可把路由参数通过组件的props传递给组件。 路由传递参数给组件的props，有两种方式：

  • 默认传参params
  • 通过函数传递自定义数据

1.2props默认传参

props默认传参是params。以父组件Fish点击路由，跳转到Fishdetail组件为例。

  • 创建Fish组件传递params参数
  • 创建路由，路由配置props参数为true
  • 创建FishDetail组件，通过defineProps接收props参数 Fish组件代码
xml 复制代码 
<template>
  <div>
    <ul>
      <li v-for="item in fishs" :key="item.id">
        <router-link
         :to="{name:'fishdetail',params:{id:item.id,name:item.name,price:item.price}}">{{ item.name }}</router-link>
      </li>
    </ul>
    <RouterView/>
  </div>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
let fishs = reactive([
  {id:'01',name:'鲫鱼',price:100},
  {id:'02',name:'草鱼',price:150},
  {id:'03',name:'鲈鱼',price:200},
])
</script>

FishDetail组件代码

xml 复制代码 
<template>
  <div>
    <h3>鱼类：{{ name }}</h3>
    <h3>id：{{ id }}</h3>
    <h3>价格：{{ price }}</h3>
  </div>
</template>
<script setup lang="ts">
defineProps(['name', 'id', 'price']);
</script>

路由代码

javascript 复制代码 
import { createRouter, createWebHistory } from 'vue-router'
import Fish from '@/view/Fish.vue'
import Cat from '@/view/Cat.vue'
import Bird from '@/view/Bird.vue'
import FishDetial from '@/view/FishDetial.vue'
const routes = [
  {
    name: 'fish',
    path: '/fish',
    component: Fish,
    children: [
      {
        name: 'fishdetail',
        path: 'detail/:id/:name/:price?',
        component: FishDetial,
        props:true
      }
    ]
  },
  { path: '/cat', component: Cat },
  { path: '/bird', component: Bird }, // 动态路由
]
const router = createRouter({
  history: createWebHistory(),
  routes: routes,
})
export default router

运行查看效果 对比路由params传参与props默认传参的区别

  • props默认传参，在子组件中不需要通过useRoute()接收路由参数
  • props默认传参，通过defineProps接收数据，可直接在模版中使用
  • props默认传参，在路由中设置props为true即可

1.3路由props通过函数传递自定义数据

自定义数据可以根据需要来定义，以传递query数据为例。 路由配置：

typescript 复制代码 
  import { createRouter, createWebHistory } from 'vue-router'
  import Fish from '@/view/Fish.vue'
  import Cat from '@/view/Cat.vue'
  import Bird from '@/view/Bird.vue'
  import FishDetial from '@/view/FishDetial.vue'
  console.log(createRouter)
  const routes = [
    {
      name: 'fish',
      path: '/fish',
      component: Fish,
      children: [
        {
          name: 'fishdetail',
          path: 'detail',
          component: FishDetial,
          props(route: any) {
            return route.query;
          }
        }
      ]
    },
    { path: '/cat', component: Cat },
    { path: '/bird', component: Bird }, // 动态路由
  ]
  const router = createRouter({
    history: createWebHistory(),
    routes: routes,
  })
  export default router

Fish代码

xml 复制代码 
<template>
  <div>
    <ul>
      <li v-for="item in fishs" :key="item.id">
        <router-link
         :to="{name:'fishdetail',query:{id:item.id,name:item.name,price:item.price}}">{{ item.name }}</router-link>
      </li>
    </ul>
    <RouterView/>
  </div>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
let fishs = reactive([
  {id:'01',name:'鲫鱼',price:100},
  {id:'02',name:'草鱼',price:150},
  {id:'03',name:'鲈鱼',price:200},
])
</script>

FishDetail代码

xml 复制代码 
<template>
  <div>
    <h3>鱼类：{{ name }}</h3>
    <h3>id：{{ id }}</h3>
    <h3>价格：{{ price }}</h3>
  </div>
</template>
<script setup lang="ts">
defineProps(['name', 'id', 'price']);
</script>

注意核心代码分两处，一是路由的配置，一是route-link跳转

typescript 复制代码 
 children: [
        {
          name: 'fishdetail',
          path: 'detail',
          component: FishDetial,
          props(route: any) {
            return route.query;
          }
        }
      ]
ini 复制代码 
 <router-link
      :to="{name:'fishdetail',query:{id:item.id,name:item.name,price:item.price}}">
         {{ item.name }}
 </router-link>

2、路由的replace属性

与push相对，当点击路由进入页面时。默认是push模式，push是一个一个页面堆叠在一起，点击浏览器返回键，可返回到上一页面。replace属性则不是，它只有一个页面，当点击路由时，它替换当前页面。如下：如需要给标签加上replace即可

ini 复制代码 
    <router-link replace :to="{name:'fish'}">跳转到鱼</router-link>
	<router-link replace to="/cat">跳转到猫</router-link>
    <router-link replace to="/bird">跳转到鸟</router-link>

如图，点击路由跳转时，无法后退

3、编程式路由导航

编程式路由导航是在开发中使用最常见的一种方式，而前边使用的router-link，实则就是a标签。

ini 复制代码 
<a href="/cat" class="">跳转到鱼</a>
<router-link replace to="/cat">跳转到猫</router-link>

这两种写法等效。编程式导航是使用api跳转路由，如打开页面三秒跳转到cat页面，再如用户登录成功后跳转到个人页面。这些都需要编程式导航。

  • 创建Fish组件、FishDetail
  • 在Fish组件引入useRouter函数，创建路由器router,注意与route区别
  • router使用push或者replace跳转到对应路由
  • push或者replace函数的参数与router-link中的to参数使用方法是一样的 Fish组件
xml 复制代码 
<template>
  <div>
    <ul>
      <li v-for="item in fishs" :key="item.id">
        <!-- <router-link :to="`/fish/detail/${item.id}/${item.name}`">{{item.name  }}</router-link> -->
         <button @click="goDetail(item)">查看{{ item.name }}</button>
        <!-- <router-link
         :to="{name:'fishdetail',query:{id:item.id,name:item.name,price:item.price}}">{{ item.name }}</router-link> -->
      </li>
    </ul>
    <RouterView/>
  </div>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
import { useRouter } from 'vue-router';
let fishs = reactive([
  {id:'01',name:'鲫鱼',price:100},
  {id:'02',name:'草鱼',price:150},
  {id:'03',name:'鲈鱼',price:200},
])
let router = useRouter();
function goDetail(fish: any) {
  router.push({
    name: 'fishdetail',
    query:fish
  });
}
</script>

FishDetail组件源码

xml 复制代码 
<template>
  <div>
    <h3>鱼类：{{ name }}</h3>
    <h3>id：{{ id }}</h3>
    <h3>价格：{{ price }}</h3>
  </div>
</template>
<script setup lang="ts">
import { useRoute } from 'vue-router';
// let route = useRoute();
defineProps(['name', 'id', 'price']);
</script>

路由源码

typescript 复制代码 
  import { createRouter, createWebHistory } from 'vue-router'
  import Fish from '@/view/Fish.vue'
  import Cat from '@/view/Cat.vue'
  import Bird from '@/view/Bird.vue'
  import FishDetial from '@/view/FishDetial.vue'
  console.log(createRouter)
  const routes = [
    {
      name: 'fish',
      path: '/fish',
      component: Fish,
      children: [
        {
          name: 'fishdetail',
          path: 'detail',
          component: FishDetial,
          props(route: any) {
            return route.query;
          }
        }
      ]
    },
    { path: '/cat', component: Cat },
    { path: '/bird', component: Bird }, // 动态路由
  ]
  const router = createRouter({
    history: createWebHistory(),
    routes: routes,
  })
  export default router

运行查看效果： 注意对比一下router.push的参数与router-link的to参数。两者参数用法是一致的，不管路由如何配置，是使用query还是params传参还是props传参。 如下例：

ini 复制代码 
 <router-link
         :to="{name:'fishdetail',query:{id:item.id,name:item.name,price:item.price}}">
         {{ item.name }}</router-link>
php 复制代码 
function goDetail(fish: any) {
  router.push({
    name: 'fishdetail',
    query:fish
  });
}

router-link的to用法与 router.push用法一致。

4、路由的重定向

路由的重定向，就是访问a路由，自动跳转到b路由。如打开主页，默认访问http://localhost:5173/，访问的路径是/,能否一打开就跳转到/fish。就用重定向来解决。

css 复制代码 
 {
    path: '/',
    redirect: '/fish'

  },

路由具体代码：

typescript 复制代码 
  import { createRouter, createWebHistory } from 'vue-router'
  import Fish from '@/view/Fish.vue'
  import Cat from '@/view/Cat.vue'
  import Bird from '@/view/Bird.vue'
  import FishDetial from '@/view/FishDetial.vue'
  console.log(createRouter)
const routes = [
  {
    path: '/',
    redirect: '/fish'

  },
  {
    name: 'fish',
    path: '/fish',
    component: Fish,
    children: [
      {
        name: 'fishdetail',
        path: 'detail',
        component: FishDetial,
        props(route: any) {
          return route.query;
        }
      }
    ]
  },
  { path: '/cat', component: Cat },
  { path: '/bird', component: Bird }, // 动态路由
]
  const router = createRouter({
    history: createWebHistory(),
    routes: routes,
  })
  export default router

效果是一打开页面，就重定向到fish页面

相关推荐
吴声子夜歌1 小时前
JavaScript——call()、apply()和bind()
开发语言·前端·javascript
高桥凉介发量惊人2 小时前
质量与交付篇（2/6）：CI/CD 实战——自动构建、签名、分发
前端
好雨知时节t2 小时前
sleep 函数在React项目中的运用
javascript
好雨知时节t2 小时前
关于Scheduler 类，一个并发控制调度器
javascript
xw-busy-code2 小时前
Prettier 学习笔记
javascript·笔记·学习·prettier
毕设源码-郭学长2 小时前
【开题答辩全过程】以 基于Web的网上问诊系统的设计与实现为例，包含答辩的问题和答案
前端
电商API&Tina2 小时前
电商数据采集API接口||合规优先、稳定高效、数据精准
java·javascript·数据库·python·json
酉鬼女又兒2 小时前
零基础快速入门前端DOM 操作核心知识与实战解析（完整汇总版）(可用于备赛蓝桥杯Web应用开发)
开发语言·前端·javascript·职场和发展·蓝桥杯·js
喝拿铁写前端3 小时前
一套面向 Web、H5、小程序与 Flutter 的多端一致性技术方案
前端·架构
热门推荐
012026年3月AI领域大事件：DeepSeek引领开源风暴02GitHub 镜像站点03围棋-html版本04Qwen3.5 开源全解析：从 0.8B 到 397B，代际升级 + 全场景选型指南05小黑课堂计算机二级WPSoffice题库软件下载安装教程（2026年3月最新版）06班级宠物园部署指南07UV安装并设置国内源08【计算机一级WPSoffice】小黑课堂题库软件下载安装教程（2026年3月最新版）09OpenClaw 使用和管理 MCP 完全指南10让 Trae IDE 智能体 “读懂”文档 Excel+PDF+DOCX ：mcp-documents-reader 工具使用指南