Vue 구성 요소에서 경로를 지정하는 올바른 방법

Vue 구성 요소에서 경로를 지정하는 올바른 방법

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-module.ts:

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

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

guide.ts:

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

Guide Component를 사용하는 것은 무엇이든지, 어떻게든지, 경로가 있는지 신경 쓸 필요가 없기 때문에 이 방법은 매우 좋은 방법이라고 생각합니다.

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.component.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,

좀 더 나은/깨끗한 방법이 없을까요?컴포넌트가 루트 자체를 소비하고 루트가 계층 아래로 이동할 필요가 없도록 하기 위해서일까요?

좀 더 나은/깨끗한 방법이 없을까요?

항상, 한 달만 시간을 주고 네 코드로 돌아와.

아마도록 성분과 경로는 약자의 입장 진출할 필요가 없는 길 자체를 소비하였다?

나는 TypeScript지만 당신은 체계가 통과할 필요 없이 기기 자체에서 그 경로에 액세스 할 수 있는 좀 서툽니다.여기 자바 스크립트에 대한 예가 있다.

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을 좀 더 복잡한 데이터 구조로 앱으로 설계된 것을 조사할 것이다.

편집

네, 이제 알겠어요.난 이 토론을 발견했어체크아웃this.$router.addRoutes()자그만하지만 비행 중에 추가할 것이다 기존 요소들을 대체하지 않는다.

언급URL:https://stackoverflow.com/questions/43901116/proper-way-to-specify-routes-on-vue-components