前言

今天小编带你们认识下重定向和别名，看名字都能看出来重定向就是重新定一个跳转方向，而别名就相当于小名取个小名。以下为详细介绍：

重定向和别名区别

.别名（alias）：
可以造成一个组件，对应俩个url
/user/userA 的别名是 /user/userB，意味着，当用户访问 /user/userB时，URL会保持为 /user/userB，但是路由匹配则为 /user/userA，
{ path: “userA”, component: UserA, alias: “userB” }
"别名” 可以自由地将UI结构映射到任意的URL，而不是受限于配置的嵌套路由结构

```cpp
import { createRouter, createWebHistory } from 'vue-router';
import Homes from '../views/Home.vue'
const routes = [{path: '/',name: 'home',//别名 小名 输入（'smallhome'，'home'，'/'）都能跳转到home页alias：'smallhome',,component: () => import("@/components/Home"),}];let router = createRouter({history: createWebHistory(),routes
});export default router;


**重定向(redirect)**：
可以造成，一个url， 对应多个不同的组件
重定向也是通过 routes 配置完成，如，从 /user/userA 重定向到 /user/userB
当用户访问 /user/userA 时，URL将会被替换成 /user/userB，然后匹配路由为 /user/userB
```cpp
import { createRouter, createWebHistory } from 'vue-router';
import Homes from '../views/Home.vue'
const routes = [{path: '/',name: 'home',//重定向 当你跳转home页面它会强制跳转aboutredirect: '/about',component: () => import("@/components/Home"),}];let router = createRouter({history: createWebHistory(),routes
});export default router;

总结

只发容易理解的文章，感谢支持

vue-router中重定向和别名相关推荐

vue router中hash模式和history模式的区别
面试问答 hash 模式与 history 模式的区别,这个也是面试常问的问题,不要小看这道题其实问到这里的时候那个面试官应该是个大牛,开发经验丰富,这个题其实就是考验你的开发经验是否属实. ...
Vue Router的详细教程
Vue Router的详细教程安装 #直接下载 / CDN https://unpkg.com/vue-router/dist/vue-router.js Unpkg.com 提供了基于 NPM 的 ...
Vue2.x - Vue Router
目录 Vue与SPA 什么是SPA 简单了解SPA 什么是MPA SPA相较于MPA的优点实现SPA的几个关键点理解SPA单页面架构什么是前端路由锚链接与URL中的hash值通过hashch ...
Vue学习笔记（六）--- 前端路由 Vue Router
一.路由 1.概念路由本质上来说就是一种对应关系,比如说我们在浏览器中输入不同的 url 地址,我们就能访问不同的资源,那么这 url 地址与资源之间的对应关系,就是路由. 2.分类 ① 后端路 ...
【Vue】相关生态——Vue Router路由
Vue Router路由基本使用带参数的动态路由匹配捕获所有路由或404 Not found 路由嵌套路由编程式导航重定向和别名将props传递给路由组件不同的历史模式进阶导航守卫 ...
Vue Router 实现路由控制实战
本文是我在学习过程中记录学习的点点滴滴,目的是为了学完之后巩固一下顺便也和大家分享一下,日后忘记了也可以方便快速的复习. Vue Router 实现路由控制实战前言一.什么是单页面应用及实现前端路 ...
Vue Router的router-link
详情可见 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8 ...
Vue Router 4.0 正式发布！焕然一新。
关注若川视野,回复"pdf" 领取资料,回复"加群",可加群长期交流学习 12月8日,Vue Router 4 正式发布稳定版本. 在经历了 14 个 Alph ...
vue router children 路由变了组件没变_Vue.js从零开始——路由（2）
因为一些原因,我断更了几天时间,因为要准备面试 + 不在家,抱歉大家! 题图是一个大概的 Vue 模块化项目组成,当然因为我从网上找的,所以可以忽略当中的 Bulma,这其实是一个 CSS 框架,往简 ...

vue-router中重定向和别名

前言

重定向和别名区别

总结

vue-router中重定向和别名相关推荐

最新文章

热门文章