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官方教程。