最新版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页面

相关推荐
郭老二4 小时前
【前端】vue3：编译步骤
前端
不在逃避q4 小时前
Trae/Vs Code/Cursor命令行无法跑npm命令
前端·arcgis·npm
夏殇之殁5 小时前
包中创建自定义列表项。 . 使用自定义列表项进行数据绑定 . 将天气预报数据保存到本地内存表，通过LiveBindings进行显示。 ...
服务器·前端·javascript
The Chosen One9855 小时前
高进度算法模板速记（待完善)
java·前端·算法
陈随易5 小时前
MoonBit抓包模块pcap，查看电脑的每一次联网通信
前端·后端·程序员
新中地GIS开发老师6 小时前
WebGIS开发学生作品|低空航天管理与航线规划系统
前端·javascript·webgis·三维gis开发
用户059540174466 小时前
大模型对话记忆持久化踩坑实录：用 Playwright 自动化测了 300 次，终于揪出会话丢失的真凶
前端·css
丙氨酸長鏈6 小时前
Web前端入门第 问：JavaScript 一个简单的 IndexedDB 数据库入门示例
前端·javascript·数据库
kyriewen7 小时前
面试官让我手写虚拟列表——AI生成的版本，快速滚动几下就白屏了
前端·javascript·面试
IT_陈寒7 小时前
Vite热更新失效？你可能漏了这个配置
前端·人工智能·后端
热门推荐
01如何新建文件夹？ 电脑新建文件夹的4种方法02GitHub 镜像站点03国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）042026年7月AI圈大地震：GPT-5.6被政府限制、Claude入驻Slack、Anthropic自研芯片05微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新06AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路072026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？08AI科技热点日报 | 2026年07月01日092026 年 AI 大模型 & AI 编程工具实战全总结102026上半年大模型全景技术解读：推理融合、Agent 爆发与多模态统一