【vue-router学习】从零开始学习vue-router4.x（五）

路由重定向

在创建路由时可以用redirect参数指定默认访问路径

写法1

const routes = [{
		path: "/",
		component: () => import("../components/root.vue"),
		redirect: to => {
			return "user1"
		},
		children: [{
				path: "user1",
				components: {
					default: () => import("../components/A.vue")
				}
			},
			{
				path: "user2",
				components: {
					bbb: () => import("../components/B.vue"),
					ccc: () => import("../components/C.vue")
				}
			}
		]
	}
]

 

写法2

const routes = [{
		path: "/",
		component: () => import("../components/root.vue"),
		redirect: "user1",
		children: [{
				path: "user1",
				components: {
					default: () => import("../components/A.vue")
				}
			},
			{
				path: "user2",
				components: {
					bbb: () => import("../components/B.vue"),
					ccc: () => import("../components/C.vue")
				}
			}
		]
	}

]

写法3

const routes = [{
		path: "/",
		component: () => import("../components/root.vue"),
		redirect: {
			path:"user1"
		},
		children: [{
				path: "user1",
				components: {
					default: () => import("../components/A.vue")
				}
			},
			{
				path: "user2",
				components: {
					bbb: () => import("../components/B.vue"),
					ccc: () => import("../components/C.vue")
				}
			}
		]
	}

]

 路由别名

使用alias参数可以为路由起多个别名

const routes = [{
		path: "/",
		component: () => import("../components/root.vue"),
		alias: ["/root","/root1"],
		children: [{
				path: "user1",
				components: {
					default: () => import("../components/A.vue")
				}
			},
			{
				path: "user2",
				components: {
					bbb: () => import("../components/B.vue"),
					ccc: () => import("../components/C.vue")
				}
			}
		]
	}

]