typescript - 在 Vue 组件上指定路由的正确方法

Question

从 Angular 2/4 开始，我们会像这样做我们的路线:

guide.component.ts:

@Component({
  selector: 'app-guide',
  templateUrl: './guide.component.html',
  styleUrls: ['./guide.component.scss']
})
export class GuideComponent implements OnInit, OnDestroy {

guide-routing.module.ts:

const routes: Routes = [
  {
    path: 'guide/:layout',
    component: GuideComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class GuideRoutingModule { }

指南.module.ts:

@NgModule({
  imports: [
    CommonModule,
    // Routing comes last
    GuideRoutingModule

我认为这是一种非常好的实现方式，因为任何消耗 GuideComponent 的东西都不必关心什么、如何或是否有路线。

在 Vue 中，我们必须将路由一直传递到 app.ts:

细节.component.ts:

@Component({
  template,
  name: 'Detail',
  components: {
    Something
  }
})
export class Detail extends Vue {

细节.route.ts:

export const detailRoute: RouteConfig = {
  path: '/detail/:id',
  component: Detail,
  props: (route: Route) => ({
    state: route.query.state
  })
};

组件.routes.ts:

export const componentRoutes = [
  detailRoute
];

核心.route.ts:

export const coreRoute = {
  path: '/',
  component: Core,
  props: (route: Route) => ({
    showPlayer: route.query.player === 'true' || !route.query.player
  }),
  children: [
    ...componentRoutes
  ]
};

应用.ts:

const router = new VueRouter({
  routes: [coreRoute]
});

// Bootstrap Vue app
export default new Vue({
  store,
  router,

是否有更好/更清洁的方法来做到这一点？也许组件会消耗路由本身，而路由不必沿着层次结构向下移动？

Answer 1

Is there a better/cleaner way to do this?

总是，只要给它一个月的时间，然后再回来查看您的代码。

Maybe so that the component consumed the route itself and the route doesn't have to make its way down the hierarchy?

我不熟悉 TypeScript，但您可以从组件本身访问路由，而无需将其向下传递到层次结构中。这是一个 JavaScript 示例。

应用程序.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

import store from './vuex/store'
import {router} from './router'

new Vue({
  store,
  router
}).$mount('#app')

路由器.js

import VueRouter from 'vue-router'
import Detail from './components/Detail.vue'

export var router = new VueRouter({
  name: 'Router',
  linkActiveClass: 'active',
  routes: [
    {
      path: '/detail/:id',
      component: Detail
    }
  ]
})

细节.js

export default {
  name: 'Detail',
  components: {
    Something
  },
  data () {
    return {
      query: '',
      changed: false
    }
  },
  mounted () {
    this.query = this.$route.query 
  }

如果您希望在全局范围内访问数据，我会查看 Vuex它专为具有更复杂数据结构的应用程序而设计。

编辑

好的，现在我明白了。我找到了这个 discussion .检查 this.$router.addRoutes() 它不会替换现有组件，但会动态添加它们。