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

是否有 better/cleaner 方法来做到这一点？也许这样组件会消耗路由本身并且路由不必沿着层次结构向下移动？

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.

中的示例

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

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

Proper way to specify routes on Vue Components

typescript

vue.js

vue-router

vue-component

vuejs2

app.js

router.js

Detail.js

编辑