前提：当你搭建完一个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官方教程。
网友评论