Vue3 / Ts Router详解

一、路由跳转

router/index.ts

import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";// 2. 配置路由
const routes: Array = [{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

编程式路由导航 path 

app.vue

编程式路由导航 name

app.vue

二、路由传参

login 给 reg 传参

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

 二.1、query传参方式

login.vue

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

reg.vue

如图

  二.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"),},

详情页面

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

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

三、路由嵌套

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

footer.vue

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

四、命名视图

所用场景为 ：

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

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

(有点像插槽)

【App.vue】

【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=ccomponents: {b: () => import("../components/B.vue"),c: () => import("../components/C.vue")}}]}

【routee.vue】

四.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 该函数进行查看，如下两图

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！