vue router路由机制 别名，重定向，动态路由匹配

最新推荐文章于 2024-04-23 08:38:44 发布
最新推荐文章于 2024-04-23 08:38:44 发布
阅读量559 收藏
点赞数
分类专栏： 实训笔记 文章标签： html5 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/NI_computer/article/details/108973715
版权

别名

/a的别名是/b，意味着，当用户访问/b时，URL会保持为/b，但是路由匹配则为/a，就像用户访问/a一样
使用alias设置别名

{
   
  		path: '/teacher',
        name: 'teacher-a', //给路由命名方便跳转
        component: teacher,            
        alias: '/student'
                    },

此时访问teacher和student都是在访问teacher

重定向

“重定向”的意思是&#x

最低0.47元/天 解锁文章
NI_computer
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
路由重定向与别名
l2461821849的博客
10-05 338
vue-router 文章目录vue-router重定向案例组件路由配置别名404 重定向 有的时候，我们会根据某种需求对用户请求的页面进行重新定位 案例 现有一小说网站，提供了 男生频道 和 女生频道 的两个入口，用户首次进入页面的时候，会出现选择，并记住用户的选择，以后该用户进入网站直接根据记录的选择进入对应的频道 组件 // BookChoose.vue <template> <div> <router-link :to="{name: 'book
Vue入坑——vue-router别名alias
weixin_33798152的博客
05-12 2545
2019独角兽企业重金招聘Python工程师标准>>> ...
路由传值 path,name,
wangyangzxc123的博客
11-21 641
路由之间传值的三种方式
vue-router学习5：重定向和别名
最新发布
qq_40358970的博客
04-23 357
vueRouter 重定向（Redirects）和别名（Aliases）是两种用于管理路由的方式，它们允许你以不同的 URL 访问相同的内容或者将某个 URL 重定向到另一个 URL。
【Vue-Router】别名
小秀的博客
08-14 607
后台返回来的路径名不合理，但多个项目在使用中了，不方便改时可以使用别名。
Vue Router 重定向和别名
qq_26642611的博客
12-25 169
重定向 重定向也是通过 routes 配置来完成，下面例子是从 /a 重定向到 /b： const router = new VueRouter({ routes: [ { path: '/a', redirect: '/b' } ] }) 重定向的目标也可以是一个命名的路由： const router = new VueRouter({ routes: [ { pa...
动态匹配路由
kbdmy的博客
08-05 115
配置路由 配置路径
vue-router重定向和路由别名的使用讲解
12-11
二、路由别名（就是给这个路由起了个名字，访问这个路由的时候不需要访问path 而是访问alias后面的） /a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。 ...
Vue路由 重定向和别名的区别说明
10-14
重定向的目标可以是静态路径、命名路由，甚至是动态计算的路径： ```javascript redirect: '/some命名路由' redirect: to => { // 方法接收目标路由作为参数 // return 重定向的字符串路径/路径对象 } ``` 需要...
Vue路由管理器Vue-router的使用方法详解
10-15
你可以通过`routes`数组来定义一系列的路由规则，包括路径、组件、命名、重定向和别名等。例如： ```javascript const routes = [ { path: '/home', component: Home, name: 'home', children: [ // 子路由 ...
详解如何写出一个利于扩展的vue路由配置
10-16
4. **动态路由匹配（Dynamic Route Matching）**：动态路由可以捕获路径中的变量，使路由更具灵活性。例如： ```javascript { path: '/user/:userId', component: User } ``` 5. **路由守卫（Route Guards）**：...
***Vue-router 路由别名配置***
weixin_41040445的博客
01-24 363
根目录新建文件 vue.config.js const path = require("path") function resolve(dir) { return path.join(__dirname, dir) } module.exports = { chainWebpack: (config) => { // 第一参数@$代表别名，第二个参数代表替代的开始路径 config.resolve.alias.set("@s", resolve('.
vue-router
热门推荐
青蛙king的博客
08-08 1万+
一、如何引入并使用Vue Router 使用 Vue.js 通过组合组件来组成单页面应用程序时，如何引入并使用Vue Router 呢？ 第一步，将组件 (components) 映射到路由。 第二步，告诉 Vue Router 在哪里渲染它们。 二、动态路由匹配 三、嵌套路由 四、编程式的导航 五、命名路由 六、命名视图 七、重定向和别名 八、路由组件传参 九、HTML5 History 模式 ...
vue-Router路由别名使用技巧
qq_40710974的博客
11-26 2234
最近在工作中看到了这样的代码 <div> <router-view></router-view> <router-view name="Root"></router-view> </div> 居然有两个routerView串在一起使用,从来只会使用嵌套路由的我没想到routerView这玩意原来是可以用来布局的. 何为命名视图? 有的时候我们想在同级展示多个视图而不是嵌套,比如左边是一个侧边栏右边主体内容.他们作为两个同级的视.
vue-router中重定向和别名
老余的博客
09-26 519
看名字都能看出来重定向就是 重新定一个跳转方向，而别名就相当于小名 取个小名。以下为详细介绍：.别名（alias）： 可以造成 一个组件，对应俩个url /user/userA 的别名是 /user/userB，意味着，当用户访问 /user/userB时，URL会保持为 /user/userB，但是路由匹配则为 /user/userA， { path: “userA”, component: UserA, alias: “userB” } "别名” 可以自由地将UI结构映射到任意的URL，而不是受限于
vue-router 设置别名、重定向的介绍和应用场景
小文同学的博客
03-28 620
vue-router 设置别名、重定向的介绍和应用场景
vueRouter动态路由匹配
煮酒客的博客
03-05 274
vueRouter动态路由匹配 动态路由匹配需要安装vue-router 在控制台选择安装的路径 npm init --yes npm install vue-router -S html代码块 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <met...
vue-router从入门到精通之重定向和别名（五）
FavoriteStudent的博客
06-27 456
vue-router的重定向根据router实例化时的配置来设置{ path: '/home', redirect: '/document', }上述代码表示从/home重定向到/document重定向的目标也可以是一个命名的路由{ path: '/home/:id', redirect: {name: 'document'} }, { path...
Vue.js 学习笔记十三：Vue Router 之重定向和别名
Stary 的 IT 之旅
06-21 152
重定向和别名 重定向 在开发当中，我们往往设置不同的路径进行跳转，但有时候不同的路径可能是同一个页面，或者说同一个组件，这时候就需要路由的重定向。 下面是从 / 重定向到 /home： /src/router/index.js ...
基于vue-router 多级路由redirect 重定向的问题
05-01
在使用Vue.js开发应用程序中，Vue-router是非常常用的路由工具。它可以实现多级路由的嵌套，并且支持路由的redirect重定向功能。下面我们来详细介绍一下这个问题。 首先，多级路由可以让我们的应用程序在页面切换时更加流畅自然，同时也方便进行组件的复用和嵌套。而当我们需要在某些情况下进行重定向时，可以使用Vue-router提供的redirect功能，这样就能够将用户的请求自动重定向到指定的路由上。 例如，我们可以在路由配置中设置： ``` { path: '/home', component: Home, children: [ { path: '', redirect: 'dashboard' }, { path: 'dashboard', component: Dashboard }, { path: 'settings', component: Settings } ] } ``` 上面的代码中，当用户访问/home时，会自动重定向到/home/dashboard，进而渲染Dashboard组件。这样就可以让应用程序的访问更加易用和人性化。 值得注意的是，当我们使用redirect进行路由重定向时，需要注意重定向的目标路由是否存在。如果目标路由不存在，会导致路由无法正常渲染，这是需要我们在开发过程中需多加注意的问题。同时，还需要注意路由优先级的问题，即路由的配置顺序和匹配优先级等，这些都是影响路由跳转的重要因素。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值