vue-router | 重定向和别名

前提:当你搭建完一个vue脚手架之后,通过localhost:8080打开一个页面时,url的显示会变成http://localhost:8080/#/,此时路由设置如下:

图 1

页面会显示home.vue里的内容。即是,通过localhost:8080打开页面,路由一定是到path:'/'这个页面的。

需求:打开localhost:8080链接,按enter键,进入localhost:8080/login路由页面。

解决方案:使用重命名redirect即可。

代码如下:

{

       path: '/',

       redirect: '/login'

}

拓展:

(1)开发者设置的路由里只有path为 '/home' 和 '/login' 的两个路由。但是此时要是,用户胡乱输入或者不小心输入不存在的路由时,那么页面将是一片空白。这虽然说不是错误,但是这并不是我们想要的。所以,可以设定——当用户输入不存在的路由时,统一跳转到某一页面。即是:

图 2

如图,比原来自动生成的index.js文件多了一行代码

mode: 'history'

这个的用途和以上提到的重命名无关,详情见HTML5 History模式

图2中实现的功能:

(1)输入localhost:8080,回车,url变成localhost:8080/home,显示home页面内容。这是因为path:'*'表示不存在的路由。开发者只设置了'/home'和'/login'。'/'就是不存在、未设置的。

(2)输入localhost:8080/abc,回车,url变成localhost:8080/home,显示home页面内容。这是因为path:'*'表示不存在的路由。开发者只设置了'/home'和'/login'。'/abc'就是不存在、未设置的。说白了个(1)是一个原因。

(3)输入localhost:8080/home,回车,正常显示home里的内容,这个没得说,设置了的,输入啥就是啥。

(4)输入localhost:8080/login,回车,也正常显示login里的内容,原因和(3)一样。

(5)输入localhost:8080/b,回车,url不发生改变,仍为localhost:8080/b。显示home里的内容。这vue-router里的别名,就是给了个小名,指到同一个组件。

最后,推荐大家可以看一下vue-router官方教程

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,837评论 18 139
  • 1路由,其实就是指向的意思,当我点击页面上的home按钮时,页面中就要显示home的内容,如果点击页面上的abou...
    你好陌生人丶阅读 1,642评论 0 6
  • Vue-router学习指南 日记:本文按照vue-router官网的知识结合例子进行分析和讲解,搭建工具(vue...
    sunny519111阅读 1,486评论 0 6
  • 4月12日上午,教研室在实验小学举行了我的课堂我做主——思维课堂建设主题研讨活动。 全县17处学校...
    海纳百川Wendy阅读 641评论 0 5
  • 从前世界上只有两类人。 男生,女生。 后来亚当夏娃相爱了。 出现了第三种人。 从前只有两种生活。 男生的生活, 女...
    十十十三阅读 216评论 0 2