如何让 vue-router 在组件内部工作答案

【问题标题】：How to get vue-router to work inside component如何让 vue-router 在组件内部工作
【发布时间】：2016-12-28 11:33:04
【问题描述】：

我有以下 index.html

<html>

....
<section id="#section">
<router-view></router-view>
</section>
</html>

在模板文件中，我在“/”处加载了以下内容

<div>
    <a v-on:click="go()">GO</a>
</div>
<script>
    export default {
        methods: {
            go: function () {
                this.$router.go("/app")
            }
        }
    }
</script>

我有以下路线图

route.map({
    '/': {component: a},
    "/app": {component:b}
})
route.start(a,"#section")

点击链接似乎不会改变视图。我不确定我做错了什么。

即使使用

 route.map({'/': {component: a, subRoutes: { '/app': component: b }}}

好像没用。

【问题讨论】：

'/app': component: b in route.map({'/': {component: a, subRoutes: { '/app': component: b }}} 不正确。

标签： vue.js vue-router vue-component

【解决方案1】：

<script>
    export default {
        methods: {
            go: function () {
                this.$router.go("/app")
            }
        }
    }
</script>

我认为应该是this.$router.go，而不是this.$route.router.go

您似乎也调用了错误的组件。应该是<router-view></router-view> 而不是<route-view></route-view>

http://router.vuejs.org/en/view.html

【讨论】：

@Kendall 什么不起作用？你有任何错误吗？
@jonathan this.$route.router.go('/app') 也不是 this.$router.go('/app')
……就是这样……没有错误。哈希值改变，但 DOM 内容没有改变
更新了我的答案。看起来你没有调用正确的组件。
还是不行。是否与标签被上述组件替换的事实有关？