第7节:alias别名的使用
上节学习了路由的重定向,我相信大家已经可以熟练使用redirect进行重定向了。使用alias别名的形式,我们也可以实现类似重定向的效果。
1.首先我们在路由配置文件里(/src/router/index.js),给上节课的Home路径起一个别名,jspang。
1
2
3
4
5
|
{
path: '/hi1',
component: Hi1,
alias:'/jspang'
}
|
2.配置我们的<router-link>,起过别名之后,可以直接使用<router-link>标签里的to属性,进行重新定向。
1
|
<router-link to="/jspang">jspang</router-link>
|
redirect和alias的区别
- redirect:仔细观察URL,redirect是直接改变了url的值,把url变成了真实的path路径。
- alias:URL路径没有别改变,这种情况更友好,让用户知道自己访问的路径,只是改变了<router-view>中的内容。
填个小坑:
别名请不要用在path为’/’中,如下代码的别名是不起作用的。
1
2
3
4
5
|
{
path: '/',
component: Hello,
alias:'/home'
}
|
在实际项目中我们遇到了这样的坑,开始以为是自己的代码写的有问题,找了两个小时作用。后来发现不是代码问题,只是vue不支持这样使用。我们犯过错误,踩过了坑,希望大家就不要