Proper way to specify routes on Vue Components

Question

Coming from Angular 2/4 we would do our routes like this:

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

I think that's a pretty nice way of doing it, as whatever is consuming the GuideComponent doesn't have to care what, how, or if there's a route.

In Vue, we're doing having to pass the route all the way down to the 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,

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?

Answer 1

Is there a better/cleaner way to do this?

Always, just give it a month and come back to your code.

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

I am unfamiliar with TypeScript but you can access the route from the component itself without having to pass it down the hierarchy. Here is an example in 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 
  }

If you are looking to access the data globally I would look into Vuex which is designed for apps with a more complex data structure.

Edit

OK, now I understand. I found this discussion . Checkout this.$router.addRoutes() it doesn't replace existing components but it will add them on the fly.