Vue3 / Ts Router详解

原创已于 2022-03-27 14:19:23 修改 · 1.6w 阅读

51 ·

CC 4.0 BY-SA版权

文章标签：

#vue

于 2022-03-25 15:04:17 首次发布

本文详细介绍了Vue.js中的路由机制，包括路由的基本配置、声明式与编程式路由跳转、路由传参的方法、路由嵌套及命名视图的应用。通过具体实例展示了如何在Vue项目中实现页面间的跳转和数据传递。

一、路由跳转

router/index.ts

import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";

// 2. 配置路由
const routes: Array<RouteRecordRaw> = [
  {
    path: "/login",
    component: () => import("../components/login.vue"),
  },
  {
    path: "/reg",
    component: () => import("../components/reg.vue"),
  },
];
// 1.返回一个 router 实列，为函数，里面有配置项（对象） history
const router = createRouter({
  history: createWebHistory(),
  routes,
});

// 3导出路由   然后去 main.ts 注册 router.ts
export default router

main.ts

import { createApp } from 'vue'
import App from './App.vue'


import router from "./router/index"
createApp(App).use(router).mount('#app')

app.vue

<template>
  <div>
    <h1>APP</h1>
   声明式路由跳转  两种方式 加入 replace 不会留下历史记录
      <router-link replace to="/login"><button>login</button></router-link>
   配置路由的 index 里面添加 name  
      <router-link :to="{ name: 'Reg' }" style="margin-left: 10px"
        ><button>reg</button></router-link
      >
    <router-view></router-view>
  </div>
</template>

<script setup lang="" ts></script>

<style></style>

编程式路由导航 path

app.vue

<template>
  <div>
    <div class="header">
      <h1>APP</h1>
      <!-- 【编程式路由跳转】 -->
      <button @click="toPagePath('/login')">login</button>
      <button @click="toPagePath('/reg')">reg</button>
    </div>
    <router-view></router-view>
  </div>
</template>

<script setup lang="ts">
// 字符串 path 跳转方式
import { useRouter } from "vue-router";
const router = useRouter();
const toPagePath = (url: string) => {
这里回调写成对象，方便后面传参 push 写成 replace 不会留下历史记录
  router.push({
    path: url,
  });
};
</script>

编程式路由导航 name

app.vue

<template>
  <div>
    <div class="header">
      <h1>APP</h1>
      <!-- 【编程式路由跳转】 -->
      <button @click="toPagePath('Login')">login</button>
      <button @click="toPagePath('Reg')">reg</button>
    </div>
    <router-view></router-view>
  </div>
</template>

<script setup lang="ts">
// 字符串 path 跳转方式
import { useRouter } from "vue-router";
const router = useRouter();
const toPagePath = (url: string) => {
这里回调写成对象，方便后面传参 push 写成 replace 不会留下历史记录
  router.push({
    name: url,
  });
};
</script>

二、路由传参

login 给 reg 传参

商品列表点击查看详情案例

二.1、query传参方式

login.vue

<template>
  <div class="login">
    <h4>shopping list</h4>
    <table cellspacing="0" class="table" border="1" color="white">
      <thead>
        <tr>
          <th>商品名称</th>
          <th>价格</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr :key="item.id" v-for="item in data">
          <th>{{ item.name }}</th>
          <th>{{ item.price }}</th>
          <th>
            <button @click="toDaitle(item)">查看详情</button>
          </th>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import { data } from "./list.json";
import { useRouter } from "vue-router"; // 传递参数用 useRouter
const router = useRouter();

 //定义 item 的值并规定类型
interface Item {
   // interface 改成 type 也行
  name: string;
  price: number;
  id: number;
}
const toDaitle = (item: Item) => {
  router.push({
    path: "/reg",
    // query 接受的是个对象{} item 此处item刚好是个对象 此时已经传过去参数了
    query: item,
  });
};
</script>

此时参数已经传过来了（如图），但没有添加到页面，需要 reg 页面接受参数

reg.vue

<template>
  <div class="reg">
    <h4>商品详情reg</h4>
    <!-- 用 query传 就用 query取 -->
    <p>商品名称：{{ route.query.name }}</p>
    <p>价格：{{ route.query.price }}</p>
    <p>编号：{{ route.query.id }}</p>
    <button @click="$router.back">返回</button>
  </div>
</template>

<script setup lang="ts">
import { data } from "./list.json";
import { useRoute, useRouter } from "vue-router"; // 获取参数 用 useRoute

const route = useRoute();
const back = useRouter();
</script>

如图

二.2、params传参方式

商品列表页面
router.push({
    name:"Reg"
    params:item
  });
// params 用到 router/index.ts 配置路由里面的 name

router/index.ts

{
    path: "/reg",
    name:"Reg",
    component: () => import("../components/reg.vue"),
  },

详情页面
<template>
  <div class="reg">
    <h4>商品详情reg</h4>
    <!-- 用 params传 就用 params取 -->
    <p>商品名称：{{ route.params.name }}</p>
    <p>价格：{{ route.params.price }}</p>
    <p>编号：{{ route.params.id }}</p>
    <button @click="$router.back">返回</button>
  </div>
</template>

<script setup lang="ts">
import { data } from "./list.json";
import { useRoute, useRouter } from "vue-router"; // 获取参数 用 useRoute

const route = useRoute();
const back = useRouter();
</script>

❤特别意注：params 传参参数不会展示在 url地址上，因为存在内存中，如图 params 传参跳转到详情后 url为下图

如此便造成一个刷新后丢失参数的问题，如下图所示刷新页面后，传递的数据丢失

三、路由嵌套

添加 footer 父路由，将 login商品列表页面和 reg商品详情页面包在footer里面充当子路由，效果如图

footer.vue
<template>
  <div>
      <router-view></router-view>
      <hr>
      <h1>footer父路由</h1>
      <router-link to="/"><button>login</button></router-link>
      <router-link to="/reg"><button>reg</button></router-link>
  </div>
</template>

router/index.ts

{
    path: "/",
    component: () => import("../components/footer.vue"),
    children: [
      {
        path: "", // 默认展示 为空
        name: "Login",
        component: () => import("../components/login.vue"),
      },
      {
        path: "/reg", // 这里可以不写 /
        name: "Reg",
        component: () => import("../components/reg.vue"),
      },
    ]
  },

注：如果给父路由 path 添加添加前缀如下添加前缀为 fat 那么跳转时也必须加上前缀 fat

router

{
    path: "/fat",
    component: () => import("../components/footer.vue"),
    children: []
}

footer

<template>
  <div>
      <router-view></router-view>
      <hr>
      <h1>footer父路由</h1>
      <router-link to="/fat"><button>login</button></router-link> // 添加前缀 fat
      <router-link to="/fat/reg"><button>reg</button></router-link> // 添加前缀 fat
  </div>
</template>

四、命名视图

所用场景为：

router 跳转至 user1 页面 显示的内容为 A组件 的内容

router 跳转至 user2 页面 显示的内容为 B、C组件 的内容

(有点像插槽)

【App.vue】

<template>
  <router-view></router-view>
</template>

<script setup lang="ts">
</script>

【router/index.js】配置路由

{
    path: '/',
    component: () => import('../components/routee.vue'),
    redirect: "/user1", // 默认进入页面 重定向
    children: [
      {
        path: '/user1',
        // 定义多个 用 components 且为一个对象
        components: {
          // default 定义 router-view 显示的默认页面 就是 router-view 里面不带 name 属性
          default: () => import("../components/A.vue")
        }
      },
      {
        path: "/user2",
        // router-view 里面需要添加 name=b 或 name=c
        components: {
          b: () => import("../components/B.vue"),
          c: () => import("../components/C.vue")
        }
      }
    ]
  }

【routee.vue】

<template>
  <div>
    <h5>routee</h5>
    <hr />
    <router-link to="/user1">uesr1</router-link>
    <router-link to="/user2" style="margin-left: 10px">user2</router-link>
    <hr />
    <!-- 默认的显示 router/index.ts 里面 default 配置的页面 -->
    <router-view></router-view>
    <router-view name="b"></router-view>
    <router-view name="c"></router-view>
  </div>
</template>

<script setup lang="ts">
</script>

四.2、带参数的跳转

redirect : " " 可以进行重定向，同时也可以传递参数

其会返回一个函数该函数用 return 返回一个对象对象里面就是 path 重定向的页面和可以传递的参数。如下 query 传递了一个对象。

path: '/',
    component: () => import('../components/routee.vue'),
    redirect: hanshu => {
      console.log(hanshu);
      return {
        path: '/user1', // 默认进入页面 重定向
        // 用 query 传递参数 age = 18 
        query: {
          age: 18
        }
      }

    },
    children: []

当我们地址栏输入项目地址 http://localhost:3000 时会自动重定向到 user1 并携带传递的参数，控制台可以 log 该函数进行查看，如下两图