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

1、概述

网站是有许多单页面组成，页面并非孤立，而是可以相互跳转。以下是官网给的定义： Vue Router 是 Vue.js 官方的路由管理器，用于构建单页面应用（SPA）。它的核心价值在于：在不刷新页面的情况下，根据 URL 的变化动态渲染不同的组件，实现流畅的页面切换体验。

假设网站有四个页面，主页，a、b、c，网站可以从主页分别跳转到a、b、c是三个页面。也可跳回主页。这些跳转信息，称作路由信息，管理路由信息完成跳转称作路由器。路由四大要素：

• 路由管理器，统一管理路由
• 路由信息，记录组件与路由的对应关系
• 跳转标签与跳转方法，用于跳转指定路由
• 路由跳转后，指定组件显示位置

2、 基本路由导航实例

• 创建主页，主页含有标题、导航、路由跳转子页面显示位置
• 创建三个子页面，Fish、Cat、Bird
• 创建路由器，挂载路由器
• 创建路由信息

2.1创建路由器、路由信息、挂载路由器

2.1.1创建路由器、路由信息

const routes = [
  { path: '/fish', component: Fish },
  { path: '/cat', component: Cat },
  { path: '/bird', component: Bird }  // 动态路由
]
const router = createRouter(
  {
    history: createWebHistory(),
    routes: routes
  }
)

路由信息routes，注意router与routes区别。routes包含path与component。

• path是路径，浏览器地址，url如：http://localhost:5173/bird，访问bird页面
• component组件，路径path对应的组件
  路由器的创建，包含路由信息与history。history有两种模式：
• createWebHistory。传统模式，url美观，seo友好
• createWebHashHistory 。hash模式，url地址含有#，不美观，兼容性好

2.1.2挂载路由器

挂载路由器，要在创建vue实例后，挂载路由。vue实例是在main.ts中创建。

const app = createApp(App)
app.use(router)
app.mount('#app')

2.2路由基本切换效果

首先打开页面，框内为空。分别点击按钮，跳转到响应页面，内容出现在边框内，注意url地址变化。

• 点击跳转到鱼，地址跳转：http://localhost:5173/fish
• 点击跳转到猫，url是/cat
• 点击跳到转鸟，url是bird

2.2.1 目录文件结构

2.2.2 main.ts源码

import { createApp } from 'vue'
import App from './App.vue'
import router from '@/router/index'
const app = createApp(App)
app.use(router)
app.mount('#app')

2.2.1 router/index.ts源码

import { createRouter,createWebHistory } from "vue-router";
import Fish from "@/view/Fish.vue";
import Cat from "@/view/Cat.vue";
import Bird from "@/view/Bird.vue";
console.log(createRouter);
const routes = [
  { path: '/fish', component: Fish },
  { path: '/cat', component: Cat },
  { path: '/bird', component: Bird }  // 动态路由
]
const router = createRouter(
  {
    history: createWebHistory(),
    routes: routes
  }
)
export default router;

2.2.1 App源码

<template>
  <div class="app">
    <router-link to="/fish">跳转到鱼</router-link>
    <router-link to="/cat">跳转到猫</router-link>
    <router-link to="/bird">跳转到鸟</router-link>
    <div class="content">
    <router-view></router-view>
    </div>
  </div>
</template>
<script setup lang="ts">
</script>

2.2.1 Fish、cat、Bird源码

Fish

<template>
  <div>
    <h1>会游泳的鲫鱼</h1>
  </div>
</template>
<script setup lang="ts">
</script>

Cat

<template>
  <div>
    <h1>爱吃老鼠的猫</h1>
  </div>
</template>
<script setup lang="ts">
</script>

Bird

<template>
  <div>
    <h1>翱翔天空的小鸟</h1>
  </div>
</template>
<script setup lang="ts">
</script>

2.3路由的两个注意点

• 路由组件，如Fish、Cat等，应存放在pages或者views文件夹内，而非components文件夹内
• 点击导航按钮，路由的切换，是旧页面组件的销毁，新页面组件创建的过程。

3、路由的工作模式

路由的工作模式有两种，在创建路由时，必须给定模式

-history

-hash

history是传统模式，优点是URL更加美观，更接近传统网站URL。缺点是后期项目上线，后台服务器需配合处理路径问题，否则报404错误。一般用history较多，如b站。

hash兼容性更好，不需要服务器后台处理路径问题。缺点是url带有#，不美观，且SEO优化方面差，后端项目常用。

以下是hash实例，与history不同之处在创建路由时，用createWebHashHistory 函数指定hash模式：

router/index.ts代码

import { createRouter,createWebHashHistory } from "vue-router";
import Fish from "@/view/Fish.vue";
import Cat from "@/view/Cat.vue";
import Bird from "@/view/Bird.vue";
console.log(createRouter);
const routes = [
  { path: '/fish', component: Fish },
  { path: '/cat', component: Cat },
  { path: '/bird', component: Bird }  // 动态路由
]
const router = createRouter(
  {
    history: createWebHashHistory(),
    routes: routes
  }
)
export default router;

运行效果：

注意路径带有#

4、路由跳转To的三种用法与路由命名

router-link有三种用法，以跳转为例Fish，重新配置Fish组件路由信息，给Fish路由命名为yu。

如下：{ name:'yu',path: '/fish', component: Fish }。

router-link有三种方式可以跳转到Fish组件

    <router-link :to="{name:'yu'}">跳转到鱼</router-link>
    <router-link :to="{path:'fish'}"">跳转到鱼</router-link>
    <router-link :to="/fish">跳转到鱼</router-link>

三种跳转方式各有利弊，常用第二种方式，便于路由传参。