重定向:
重定向”的意思是,当用户访问 /a时,URL 将会被替换成 /b,然后匹配路由为 /b,
重定向也是通过 routes 配置来完成,下面例子是从 "*" 重定向到 /home:(下面例子中列举了四种方法)
export default new Router({
mode:'history',
linkActiveClass:'is-active',
routes: [
{
path:'*',
// 重定向,下面的几种方法都可以
// redirect:'/home'
// redirect:{path:'/home'}
// redirect:{name:'Home'}
redirect:(to)=>{
//to目标路由对象,就是访问的路径的路由信息
console.log(to);
if(to.path==='/123'){
return '/about';
}else if(to.path=='/456'){
return '/document'
}else{
return '/home';
}
}
}
]
})
在例子中我们可以看到有四种方法都可以实现重定向
1、重定向的目标可以是一个路由地址:
const router = new Router({
routes: [
{ path: '*', redirect: '/home'}
]
})
2、重定向的目标也可以是一个对象,包含路由地址:
const router = new Router({
routes: [
{ path: '*',
redirect: {path:'/home'}
}
]
})
3、重定向的目标也可以是一个命名的路由:
const router = new Router({
routes: [
{ path: '*',
redirect: {name:'Home'}
}
]
})
4、重定向的目标可以是一个方法,动态返回重定向目标:
const router = new Router({
routes: [
{ path: '*',
redirect:(to)=>{
//to目标路由对象,就是访问的路径的路由信息
if(to.path==='/123'){
return '/about';
}else if(to.path=='/456'){
return '/document'
}else{
return '/home';
}
}
}
]
})
别名:
/a 的别名是 /b,意味着,当用户访问 /b 时,URL 会保持为 /b,但是路由匹配则为 /a,就像用户访问 /a 一样。
const Router = new Router({
routes:[
{
path: '/home',
name: 'Home',
component: home,
alias:'/index'
}
]
})
“别名”的功能让你可以自由地将 UI 结构映射到任意的 URL,而不是受限于配置的嵌套路由结构。