【问题标题】:May I have multiple alias in Vue's router for an specific route?我可以在 Vue 的路由器中为特定路由设置多个别名吗?
【发布时间】:2019-03-24 13:53:50
【问题描述】:

事情是这样的,虽然 alias 现在完美地满足了我的需求,但我想知道如何为路径声明多个别名,那么,这样的事情会起作用吗?示例:

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      alias: ['/home', '/home2', '/homeN']
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('./views/About.vue')
    }
  ]
})  

我的意思是,这是推荐的方法吗? Vue路由器中是否有更好的做法?

【问题讨论】:

  • 这很好,他们甚至有一个official example 这样做。如果您更担心拼写错误,那么您可能只在 * 通配符路径上使用导航防护,该路径基于路由路径的子字符串进行重定向。
  • 我想我错过了文档中的那部分,感谢@Steven B. 的澄清!
  • 你能把它写成答案让我接受吗?

标签: vuejs2 vue-router


【解决方案1】:

这很好,他们甚至有一个official example 这样做。

const router = new VueRouter({
  mode: 'history',
  base: __dirname,
  routes: [
    { path: '/root', component: Root, alias: '/root-alias' },
    { path: '/home', component: Home,
      children: [
        // absolute alias
        { path: 'foo', component: Foo, alias: '/foo' },
        // relative alias (alias to /home/bar-alias)
        { path: 'bar', component: Bar, alias: 'bar-alias' },
        // multiple aliases
        { path: 'baz', component: Baz, alias: ['/baz', 'baz-alias'] },
        // default child route with empty string as alias.
        { path: 'default', component: Default, alias: '' },
        // nested alias
        { path: 'nested', component: Nested, alias: 'nested-alias',
          children: [
            { path: 'foo', component: NestedFoo }
          ]
        }
      ]
    }
  ]
});

如果您更担心拼写错误,那么您可能只在 * 通配符路径上使用导航保护,该路径根据路径路径的子字符串进行重定向。

【讨论】:

    【解决方案2】:

    其实,你做的应该没问题。你可以提供一个别名数组,vue 会理解的。

    export default new Router({
      routes: [
        {
          path: '/',
          name: 'home',
          component: Home,
          alias: ['/home', '/home2', '/homeN']  // multiple aliases
        },
     
      ]
    })  
    

    (我复制了你的代码,因为我相信这确实是答案)。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2017-07-09
      • 2020-01-18
      • 1970-01-01
      • 2023-04-04
      • 2018-12-18
      • 1970-01-01
      • 1970-01-01
      • 2012-04-16
      相关资源
      最近更新 更多