vue-router2.0 页面跳转时url变化但页面没有刷新

Question

想实现的功能是从a页面跳转到b页面，url变化了但是页面没有刷新

index.html:

<div id="app"></div>

Login.vue

<template>
    <div id="app">
        <form id="login-form" @submit="submit">
            <div class="username">
                <label>username:</label>
                <input type="text" v-model="username"/>
            </div>
            <div class="pwd">
                <label>password:</label>
                <input type="password" v-model="password"/>
            </div>
            <button>sign in</button>
        </form>
    </div>
</template>

<script>
    export default {
        name: 'app',
        data () {
            return {
                username: '',
                password: ''
            }
        },
        methods: {
            submit(){
                this.$router.push({path: '/index'})
            }
        }
    }
</script>

<style>
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>

Index.vue

<template>
    <div>this is template body</div>
</template>

main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from './Login.vue'
import Index from './Index.vue'

Vue.use(VueRouter)
const routes = [
    {path: '/index', component: Index},
    {path: '/login', component: Login}
]
const router = new VueRouter({
    routes
})
new Vue({
    el: '#app',
    router,
    render: h => h(Login)
})

结果：

Answer 1

你说的是不是点击submit跳转到index... 之前用vue都是在 app里面加一个 router-view 来渲染不同的组件。

Answer 2

你的模板中有 router-view 吗？
h => h(login) 是不行的，你需要一个 app 组件，组件里有 router-view 自定义标签，然后 h => h(app)。

Answer 3

from 表单提交

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

Answer 4

这个后来是怎么解决的？