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

紫_龙2026-03-28 15:42

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

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

1、 什么是路由的props

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

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

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

复制代码 
<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组件代码

    <template>
    • <router-link :to="{name:'fishdetail',params:{id:item.id,name:item.name,price:item.price}}">{{ item.name }}</router-link>
    <RouterView/>
    </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组件代码

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

路由代码

复制代码 
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数据为例。

路由配置：

复制代码 
  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代码

复制代码 
<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代码

复制代码 
<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跳转

复制代码 
 children: [
        {
          name: 'fishdetail',
          path: 'detail',
          component: FishDetial,
          props(route: any) {
            return route.query;
          }
        }
      ]

 <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即可

复制代码 
    <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标签。

复制代码 
<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组件

    <template>
    • <button @click="goDetail(item)">查看{{ item.name }}</button>
    <RouterView/>
    </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组件源码

复制代码 
<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>

路由源码

复制代码 
  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传参。

如下例：

复制代码 
 <router-link
         :to="{name:'fishdetail',query:{id:item.id,name:item.name,price:item.price}}">
         {{ item.name }}</router-link>

function goDetail(fish: any) {
  router.push({
    name: 'fishdetail',
    query:fish
  });
}

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

4、路由的重定向

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

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

  },

路由具体代码：

复制代码 
  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页面

相关推荐
-SOLO-2 小时前
使用Cursor操控正在打开的Chrome
前端·chrome
chiwei_hua2 小时前
如何在 Blazor Web 前端中使用 C# 进行数据交互？
前端·c#·交互
pacong2 小时前
vscode使用
javascript·vue.js·vscode
与数据交流的路上3 小时前
linux-系统日志的归档
linux·运维·javascript
jacklood3 小时前
使用STM32的迪文屏控制使用参考方式
前端·javascript·stm32
KevinCyao3 小时前
Go短信营销接口示例代码：Golang高并发调用营销短信接口的实现方案与代码分享
android·前端·网络·golang·前端框架
Moyo2033 小时前
前端 -- react快速入门
前端·react.js·前端框架
whuhewei3 小时前
在React中实现CSS动画的回放
前端·css·react.js
北海军3 小时前
render el-select下拉框
前端·javascript·vue.js
热门推荐
012026年3月AI领域大事件：DeepSeek引领开源风暴02GitHub 镜像站点03围棋-html版本04小黑课堂计算机二级WPSoffice题库软件下载安装教程（2026年3月最新版）05班级宠物园部署指南06【计算机一级WPSoffice】小黑课堂题库软件下载安装教程（2026年3月最新版）07Qwen3.5 开源全解析：从 0.8B 到 397B，代际升级 + 全场景选型指南08UV安装并设置国内源09OpenClaw 使用和管理 MCP 完全指南10中国象棋-html版本