Vue.js 学习笔记十三：Vue Router 之重定向和别名

目录

重定向和别名

重定向

别名

---

重定向和别名

重定向

在开发当中，我们往往设置不同的路径进行跳转，但有时候不同的路径可能是同一个页面，或者说同一个组件，这时候就需要路由的重定向。

下面是从 / 重定向到 /home：

/src/router/index.js

...
const routes = [
	{
		path: '/',
		redirect: '/home'
	},
  {
    path: '/home',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]
...

别名

“重定向”的意思是，当用户访问 /时，URL 将会被替换成 /home，然后匹配路由为 /home，那么“别名”又是什么呢？

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

上面对应的路由配置为：

const routes = [
	...
  {
    path: '/home',
    name: 'Home',
    component: Home,
	alias: '/index'
  },
  ...
]

“别名”的功能让你可以自由地将 UI 结构映射到任意的 URL，而不是受限于配置的嵌套路由结构。