1.命名路由
有时候,通过一个名称来标识一个路由显得更方便一些,特别是在链接一个路由,或者是执行一些跳转的时候。你可以在创建 Router 实例的时候,在 routes
配置中给某个路由设置名称。我个人理解就相当于给路径取个名字,调用的时候,这个名字就指这个路径,不然有些路径很长,直接写太麻烦。
const router = new VueRouter({
routes: [
{
path: '/user/:userId',
name: 'user',
component: User
}
]
})
要链接到一个命名路由,可以给 router-link
的 to
属性传一个对象:
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
或者代码调用 router.push():
router.push({ name: 'user', params: { userId: 123 }})
这两种方式都会把路由导航到 /user/123
路径。
2.路由嵌套
有时候,我们会有这样的需求 :
①将App.vue用作主路由视窗,有着一个main内容(一般是顶栏和低栏),其他所有的子组件都基于App.vue渲染,这样路由配置可以配置成同一级的,每次跳转路由都销毁之前的路径。
②但是大部分时候,我们不一定非要基于App.vue的所有样式,意思就是整个工程有样式不同的好几种页面,比方说有些页面都要顶栏和低栏,有些页面只要顶栏...
这时候采取的解决方法是:ⅠApp.vue仅作为一个路由视窗,不添加任何内容,仅仅是为了映射其他子组件。
Ⅱ子组件单独创建两个类似于App.vue作用的组件,用来提供所需样式,并映射其他分别基于此的孙子组件。这时候路由index.js配置时要用到children,redirect,'',/等
3.重定向与别名
{ path: '/a', redirect: '/b' } // 从/a重定向到/b
上面意思是跳转到/a时自动就变成/b了,所以永远不会跳转到/a,可以用来授权登陆前的验证判断
重定向的目标也可以是一个命名的路由:
{ path: '/a', redirect: { name: 'b' }}
甚至是一个方法,动态返回重定向目标:
{ path: '/a', redirect: to => {
// 方法接收 目标路由 作为参数
// return 重定向的 字符串路径/路径对象
}}
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
重定向和别名的区别:
重定向:当用户访问 /a
时,URL 将会被替换成 /b
,然后匹配路由为 /b
,那么『别名』又是什么呢?
别名:/a
的别名是 /b
,意味着,当用户访问 /b
时,URL 会保持为 /b
,但是路由匹配则为 /a
,就像用户访问 /a
一样。
上面对应的路由配置为:
{ path: '/a', component: A, alias: '/b' }
『别名』的功能让你可以自由地将 UI 结构映射到任意的 URL,而不是受限于配置的嵌套路由结构。
4.url打开自动跳转到‘/’。 而‘’则意味着自动跳转到上一级时自动跳转空路径
{ path: '/', redirect: '/header' }, // 重定向到/header
{ path: '/header',
name: 'header',
component: Header,
children: [
{ path: '', redirect: 'login' }, // 默认跳转到/header/login
{ path: 'login', name: 'login', component: Login },
{ path: 'register', name: 'register', component: Register },
{ path: 'forgetPassword', name: 'forgetPassword', component: ForgetPassword }
]
},