Vue入坑——vue-router别名alias

最新推荐文章于 2024-01-03 10:57:09 发布
最新推荐文章于 2024-01-03 10:57:09 发布
阅读量2.5k 收藏 1
点赞数
文章标签： javascript python ViewUI
原文链接：https://my.oschina.net/u/3802541/blog/1811323
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

上一篇：vue-router的重定向redirect

一起学vue——vue学习总路线

——————————^~^我是萌萌哒分割线^~^————————————————

前言

上一篇，我们学习了redirect，实现了重定向的效果，其实这个alias和redirect也有同样的效果，但还是有些略微不同，一起来看看。

实现alias

a、在index.js中配置

162600_E96p_3802541.png

这里我们把前面配过的hellovue组件弄个别名

b、在App.vue中添加链接

162651_UOyK_3802541.png

c、看看效果

162713_W2cg_3802541.png

redirect与alias区别

a、redirect

163047_3Dh7_3802541.png

163059_NTHn_3802541.png

这里我们的返回主页用了重定向

看一下他的url

163128_8FUX_3802541.png

始终都是原路径

b、再看一下alias的路径

163302_3Tan_3802541.png

163309_P9QG_3802541.png

他会将url展示在路径框里。

c、总结

『重定向』的意思是，当用户访问/a时，URL 将会被替换成/b，然后匹配路由为/b

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

填坑？

我查到有博客说，给path为‘/’添加别名不能起作用，现在我们来试试。

我们来试试给首页添加一下

163626_weww_3802541.png

163716_YlK8_3802541.png

结果：

163943_C7ey_3802541.png

可以啊？？？黑人问号？？？可能是他版本太低吧~

——————————^~^我是萌萌哒分割线^~^————————————————

                                                                                                                  下一篇：vue-router钩子函数

转载于:https://my.oschina.net/u/3802541/blog/1811323

_miccretti
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
路由重定向与别名
l2461821849的博客
10-05 342
vue-router 文章目录vue-router重定向案例组件路由配置别名404 重定向 有的时候，我们会根据某种需求对用户请求的页面进行重新定位 案例 现有一小说网站，提供了 男生频道 和 女生频道 的两个入口，用户首次进入页面的时候，会出现选择，并记住用户的选择，以后该用户进入网站直接根据记录的选择进入对应的频道 组件 // BookChoose.vue <template> <div> <router-link :to="{name: 'book
vue-router学习5：重定向和别名
最新发布
qq_40358970的博客
04-23 404
vueRouter 重定向（Redirects）和别名（Aliases）是两种用于管理路由的方式，它们允许你以不同的 URL 访问相同的内容或者将某个 URL 重定向到另一个 URL。
Vue-router 04重定义、alias别名
bagamaka的博客
03-24 2081
一、重定义 如果我们想从另一个不是home网址的链接中回到home主页，我们可以通过重定义的方法也返回home主页，重定义的组件都是要在index.js的routes数组中，再次添加对象， 对象中包含1.path（path如果不传参可以随便起个名字） path的用途：path中的新名字会添加到routerlink标签 中to键的值中 <router-link to="/新名...
vue-router 路由别名alias
caoxinjian423的博客
10-07 2420
import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' import NotFound from '../views/NotFound.vue' import AView from '../views/AView.vue' import BView from '../views/BView.vue' Vue.use(VueRouter) const routes = [ .
Vue3-33-路由-路由的别名配置 alias
northcastle的博客
01-03 1459
vue3 中路由的别名配置使用案例
vue-router
青蛙king的博客
08-08 1万+
一、如何引入并使用Vue Router 使用 Vue.js 通过组合组件来组成单页面应用程序时，如何引入并使用Vue Router 呢？ 第一步，将组件 (components) 映射到路由。 第二步，告诉 Vue Router 在哪里渲染它们。 二、动态路由匹配 三、嵌套路由 四、编程式的导航 五、命名路由 六、命名视图 七、重定向和别名 八、路由组件传参 九、HTML5 History 模式 ...
vue-router重定向和路由别名的使用讲解
12-11
const router = new VueRouter({ routes: [ { path: '/a', component: A, redirect: '/b' } ] }); ``` 在这个例子中，当用户试图访问 `/a`，浏览器的 URL 将会自动更新为 `/b`，并且对应的组件 `A` 会渲染，...
Vue-Router的使用方法
10-18
var routerObj = new VueRouter({ routes: [ { path: "/login", component: login }, { path: "/register", component: register } ] }); ``` 3. **注册路由**： 在Vue实例中，通过`router`属性注册Vue ...
Vue-router参考手册.zip
02-19
9. **重定向与别名**：在路由配置中，可以设置 `redirect` 和 `alias` 属性，实现路径的重定向或定义别名。 10. **懒加载**：对于大型应用，可以使用懒加载来按需加载组件，提高应用的初始加载速度。Vue Router ...
vue-Router路由别名使用技巧
qq_40710974的博客
11-26 2246
最近在工作中看到了这样的代码 <div> <router-view></router-view> <router-view name="Root"></router-view> </div> 居然有两个routerView串在一起使用,从来只会使用嵌套路由的我没想到routerView这玩意原来是可以用来布局的. 何为命名视图? 有的时候我们想在同级展示多个视图而不是嵌套,比如左边是一个侧边栏右边主体内容.他们作为两个同级的视.
【Vue-Router】别名
小秀的博客
08-14 623
后台返回来的路径名不合理，但多个项目在使用中了，不方便改时可以使用别名。当跳转children1时，默认为 first，a为second，b为third。
vue-router中重定向和别名
老余的博客
09-26 542
看名字都能看出来重定向就是 重新定一个跳转方向，而别名就相当于小名 取个小名。以下为详细介绍：.别名（alias）： 可以造成 一个组件，对应俩个url /user/userA 的别名是 /user/userB，意味着，当用户访问 /user/userB时，URL会保持为 /user/userB，但是路由匹配则为 /user/userA， { path: “userA”, component: UserA, alias: “userB” } "别名” 可以自由地将UI结构映射到任意的URL，而不是受限于
***Vue-router 路由别名配置***
weixin_41040445的博客
01-24 370
根目录新建文件 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路由机制 别名，重定向，动态路由匹配
NI_computer的博客
10-09 563
别名 /a的别名是/b，意味着，当用户访问/b时，URL会保持为/b，但是路由匹配则为/a，就像用户访问/a一样 使用alias设置别名 { path: '/teacher', name: 'teacher-a', //给路由命名方便跳转 component: teacher, alias: '/student' }, 此时访问teacher和student都是在访问teacher 重
vue-router 设置别名、重定向的介绍和应用场景
小文同学的博客
03-28 658
vue-router 设置别名、重定向的介绍和应用场景
vue-router菜鸟进阶！(重定向和别名)
热门推荐
AprilCC的博客
11-10 1万+
重定向当用户访问/a时，URL将会被替换成/b，然后匹配路由为/b重定向也是通过routes配置来完成，下面例子是从/a重定向到/b：const router = new VueRouter({ routes: [ { path: '/a', redirect: '/`b` } ] }) 重定向的目标也可以是一个命名的路由：const router = new Vue
vue-router从入门到精通之重定向和别名（五）
FavoriteStudent的博客
06-27 460
vue-router的重定向根据router实例化时的配置来设置{ path: '/home', redirect: '/document', }上述代码表示从/home重定向到/document重定向的目标也可以是一个命名的路由{ path: '/home/:id', redirect: {name: 'document'} }, { path...
Failed to resolve import "vue-router" from "src\layout\index.vue". Does the file exist?
05-19
import VueRouter from 'vue-router' ``` 3. 确认你的 `src/layout/index.vue` 文件所在的目录在 Webpack 的解析路径中，你可以在 `webpack.config.js` 中添加以下配置： ```javascript module.exports = { /...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值