vue-router 跳转页面问题

我想实现一个登陆成功跳转页面的逻辑,使用了vue-router。
route/index.js :

import Vue from 'vue'
import Router from 'vue-router'
import Home from '../components/home'
import Login from '../App'
Vue.use(Router)

export default new Router({
  name: 'router',
  routes: [
    {
      path: '/',
      name: 'login',
      component: Login
    },
    {
      path: '/home',
      name: 'home',
      component: Home
    }
  ]
})

main.js:

import Vue from 'vue'
import Login from './App'
// import Home from './components/home'
import router from './router/index'
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<Login/>',
  components: {Login}
})

跳转逻辑 :

submitForm (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!')
            this.$router.push('/home')
          } else {
            console.log('error submit!!')
            return false
          }
        })
      }

当我点击登陆按钮后,url在后面拼接上了/home,但是页面没有跳转到home.vue组件上
请问这是为什么?我第一次撸VUE,不明白为什么,也查了很多帖子,始终没有解决。

阅读 5.9k
4 个回答

最关键的地方没给出来,组件里怎么写的?

你组件里加了<router-view></router-view>吗

 this.$router.push({path:'/home'})

or

this.$router.push({name:'home'})

我犯了一个低级的错误,我应该将组件都整合到APP.vue中,但是我将App.vue当成一个小组件同其他组件使用了...该死 在App.vue中`<template>
<router-view></router-view>
</template>` 就解决了...

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题