我想实现一个登陆成功跳转页面的逻辑,使用了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,不明白为什么,也查了很多帖子,始终没有解决。
最关键的地方没给出来,组件里怎么写的?