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

想实现的功能是从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)
})

结果:

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

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

from 表单提交

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

这个后来是怎么解决的?

  • vuejs如何实现confirm?
  • 关于angular react vue 我们在什么实际的开发项目中使用?如何选择?
  • d3.js手机端做图表时如何做自适应?
  • vue到底怎么再method中获得所需要的值啊
  • vue项目如何做页面初始化的加载动画
  • 如何写ES6版本的Vue测试?
  • vue组件可以引用一个模板文件吗
  • vue vuex vueRouter SPA问题
  • 使用vue.js 绑定数据,加载页面时都会先显示{{ message }},在显示数据
  • vue中如何将子组件传过来的值赋给v-for中的数据?
  • Vue slot HTML 标签的识别问题