0

我有一个 .vue 文件，其中包含以下内容

<template>
<div class="container">
<div class="row">
<div class="column">
<h2>Create your MIA</h2>
<p><img src="../../static/intro.gif"/></p>
<p><a v-on:click="go()" href="javascript:void(0)" class="button">Enter</a></p>
</div>
</div>
</div>
</template>
<script>
export default {
  methods: {
    go: function () {
      console.log(this.$router.go)
      this.$router.go({ path: '/app' })
    }
  }
}
</script>

在我的主 index.html 文件中

<main class="container center">
      <div id="logo"></div>
      <div id="section">
        <router-view></router-view>
      </div>
    </main>

在我的 main.js 中

import Vue from 'vue'
import Resource from 'vue-resource'
import Router from 'vue-router'
import App from './components/app'
import Intro from './components/intro'

Vue.use(Resource)
Vue.use(Router)

const route = new Router({hashbang: false,
    history: true,
    linkActiveClass: 'active',
    mode: 'html5'})

// Pointing routes to the components they should use
route.map({
  '/': {
    component: Intro,
    subRoutes: {
      'app': {
        component: App
      }
    }
  },
  '/app': {
    component: App
  }
})

// Any invalid route will redirect to home
route.redirect({
  '*': '/app'
})

route.start(Intro, '#section')

编译这些东西后，我可以获取 Intro组件，但单击按钮只会更改哈希，但不会更改组件....

根据文档，我唯一不同的是我正在以编程方式更改路线。

我在这里做错了什么？

4

0 回答 0