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

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() 它不会替换现有组件，但会即时添加它们。