vue-router 设置别名、重定向的介绍和应用场景

前几天在学习大佬的项目，看一下内部的 vue-router 时发现了一些好东西，可能自己有帮助的

重定向（redirect）

redirect 可以是一个字符串，也可以是对象，甚至也可以是一个方法

新增一个路由：将路径 " / " 重定向到 " / home "

字符串形式：

[
	{ 
		path: '/',
	 	redirect: '/home' 
	 }
]

对象形式：

重定向的目标可以是一个对象（命名的路由）：

[
	{ 
		path: '/',
		//	需要设置路由名字为 name 的路由
	 	redirect: {
			name:'home'
		}
	 }
]

函数形式：（方便携带参数）

[
  {
    // /updateShop/001 -> /shop?dataId=001
    path: '/updateShop/:id',
    // to 为跳转路由 '/updateShop/:id' 的对象
    redirect: to => {
      // return 重定向的字符串路径/路径对象
      return { path: '/shop', query: { dataId: to.params.id} }
    },
  }
]

注意：redirect （重定向）不需要写 component ，因为只是类似拦截转发而已

应用场景：首次进入页面时会自动跳转到 “/ home” 路径下的路由，防止第一次进入时出现白屏

别名 （alias）

它可以是一个字符串、数组 和 redirect 重定向类似，但是需要注意的是：

别名不会将 URL 路径修改为另外一个名字，但是会跳转到对应命名的路由，简单点说就是将 URL 对应的路由修改而已

注意： alias 的属性值以 “/” 开头的会被当做为绝对路径，否则都为相对路径

作用：可以自由地将路由映射在某个路由上面

字符串形式：

[
	{
	// 访问 /  =>  就是访问 /home , 加载 home 组件
		// 实际访问的 URL
		path: '/home',
		component: home,
		//	设置别名，可见假的 URL 
		alias: '/' 
	}
]

数组设置多个别名：（它可以在嵌套路由中使用）

//	Vue 官网的例子
[
  {
  	//	实际的 URL ，呈现 UserList
    path: '/users',
    component: UsersLayout,
    children: [
      // - 三个 URL 访问的实际 URL 为 /user , 呈现 UserList 组件
      // - /users/admin
      // - /users/list
      // - /people  （由于 people 以 "/" 开头为绝对路径将"/users"替换）
      { path: '/admin', component: UserList, alias: ['/people', 'list'] },
    ],
  },
]

对于URL 携带参数：

  {
    path: '/users/:id',
    component: UserData,
    children: [
      // 为这 3 个 URL 呈现 UserDetails
      // - /users/24 , 被别名' '标识
      // - /users/24/profile 直接访问
      // - /24 ，被别名'/:id'标识（直接路径）
      { path: 'profile', component: UserDetails, alias: ['/:id', ''] },
    ],
  },

应用场景：方便展示 404 页面，将不存在的 URL 都设置为404页面的别名，当用户访问到不存在的 URL 时（别名），将会跳转到 404页面的路由

例如：

//	借助通配符
{
	path:"/404",
	component:'../component/404.vue',
	// 将其路径设置为 /:pathMatch(.*)*，表示匹配所有未匹配到的路由到通配符里面
	alias:":/pathMatch(.*)*"
}

// 将匹配所有内容并将其放在 `$route.params.pathMatch` 下，等效上面捕获不存在的路由
{ path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },

// 将匹配以 `/user-` 开头的所有内容，并将其放在 `$route.params.afterUser` 下
{ path: '/user-:afterUser(.*)', component: UserGeneric },

注意：捕获不存在的路由操作应该放在底部，由于路由从上到下，写在前面可能会出现错误