极客观点
项目管理
HarmonyOS
本人前端渣渣，最近对这块略感兴趣，觉得Element UI不错，想学用来写点东西，下了start kit ，跑也成功了，但是想配合vue-router做点复杂的东西时，不成功。
直接上代码：
html ：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>element-starter</title>
</head>
<body>
<div id="app">
<h1>Hello App!</h1>
<router-view></router-view>
</div>
<script src="dist/build.js"></script>
</body>
</html>
main.js
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
import VueRouter from "vue-router";
import App from './App.vue'
import Home from './Home.vue'
import Login from './Login.vue'
Vue.use(VueRouter);
Vue.use(ElementUI);
const routeMap = [
{ path: '/login', component: Login },
{ path: '/home', component: Home }
]
const router = new VueRouter({
routeMap
})
const app = new Vue({
router
}).$mount('#app')Login.vue
<template>
<div id="loginForm">
<div id="loginLogo">
<img src="./assets/logo.png" />
</div>
<el-form ref="form" :model="form" label-width="80px" @submit.prevent="onSubmit">
<el-form-item label="账号">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input v-model="form.region"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" style="width:98%">立即登陆</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: 'Login',
data () {
return {
form: {
name: '',
region: '',
desc: ''
}
}
},
methods: {
startHacking () {
this.$notify({
title: 'It Works',
message: 'We have laid the groundwork for you. Now it\'s your time to build something epic!',
duration: 6000
})
}
}
}
</script>
<style>
body {
font-family: Helvetica, sans-serif;
}
#loginForm{
margin:0px auto;
margin-top: 10%;
width: 40%;
}
#loginLogo img{
display: block;
margin: 0 auto;
}
</style>App.vue
<template>
<div id="loginForm">
<div id="loginLogo">
<img src="./assets/logo.png" />
</div>
<el-form ref="form" :model="form" label-width="80px" @submit.prevent="onSubmit">
<el-form-item label="账号">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input v-model="form.region"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" style="width:98%">立即登陆</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: 'App',
data () {
return {
form: {
name: '',
region: '',
desc: ''
}
}
},
methods: {
startHacking () {
this.$notify({
title: 'It Works',
message: 'We have laid the groundwork for you. Now it\'s your time to build something epic!',
duration: 6000
})
}
}
}
</script>
<style>
body {
font-family: Helvetica, sans-serif;
}
#loginForm{
margin:0px auto;
margin-top: 10%;
width: 40%;
}
#loginLogo img{
display: block;
margin: 0 auto;
}
</style>Home.vue
<template>
<div id="loginForm">
<div id="loginLogo">
<img src="./assets/logo.png" />
</div>
<el-form ref="form" :model="form" label-width="80px" @submit.prevent="onSubmit">
<el-form-item label="账号">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input v-model="form.region"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" style="width:98%">立即登陆</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: 'Home',
data () {
return {
form: {
name: '',
region: '',
desc: ''
}
}
},
methods: {
startHacking () {
this.$notify({
title: 'It Works',
message: 'We have laid the groundwork for you. Now it\'s your time to build something epic!',
duration: 6000
})
}
}
}
</script>
<style>
body {
font-family: Helvetica, sans-serif;
}
#loginForm{
margin:0px auto;
margin-top: 10%;
width: 40%;
}
#loginLogo img{
display: block;
margin: 0 auto;
}
</style>偷懒，为了验证router的跳转方式，App.Vue 和 home.vue 暂时是一样的代码。
请问，哪里错了？
这里错了吧？
const routeMap = [
{ path: '/login', component: Login },
{ path: '/home', component: Home }
]
const router = new VueRouter({
}),
把routeMap改为routes 或者下面介个样子的，你试一下
const router = new VueRouter({
routes: [
]
})