vue-router的嵌套路由，重定向和别名

最新推荐文章于 2025-05-04 18:27:21 发布

原创最新推荐文章于 2025-05-04 18:27:21 发布 · 2.4k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

VUE 同时被 2 个专栏收录

21 篇文章

订阅专栏

12 篇文章

订阅专栏

本文详细介绍了Vue Router的命名路由、路由嵌套、重定向与别名的使用方法。命名路由允许通过名称来标识和跳转路由，简化长路径操作。路由嵌套用于构建复杂的页面结构，例如根据需求决定是否使用App.vue作为通用容器。重定向在用户访问特定路径时自动跳转到其他路径，可以是命名路由或动态返回的目标。别名则允许URL保持原样，但实际匹配到的是别名对应的路由，提供了更大的灵活性。

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 }
      ]
    },