在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 {

导向routing.module.ts：

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

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

guide.module.ts：

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

我认为这是一种非常好的方式，因为无论消费什么，GuideComponent都不必关心什么，如何或是否有路线。

在Vue，我们不得不将路线一直传递到app.ts：

detail.component.ts：

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

detail.route.ts：

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

component.routes.ts：

export const componentRoutes = [
  detailRoute
];

core.route.ts：

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

app.ts：

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

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

有更好/更清洁的方法吗？也许是因为组件消耗了路由本身，并且路由不必沿着层次结构向下移动？

Answer 1

  

有更好/更清洁的方法吗？

总是，只需给它一个月，然后回到你的代码。

  

可能是因为组件消耗了路线本身和路线   不必在层次结构中走下去吗？

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

app.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')

router.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
    }
  ]
})

Detail.js

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

如果您希望全局访问数据，我会调查Vuex，它是专为具有更复杂数据结构的应用而设计的。

修改

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