有道指定的Vue公司的组件

Question

从角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()它不会取代现有的组件，但它会动态地添加它们。