Element ui 如何跟vue-router 跳转不成功

发布于 2022-09-04 00:13:01 字数 5338 浏览 9 评论 0

本人前端渣渣，最近对这块略感兴趣，觉得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')

<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 暂时是一样的代码。

请问，哪里错了？

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

最近可好 2022-09-11 00:13:01

这里错了吧？
const routeMap = [
{ path: '/login', component: Login },
{ path: '/home', component: Home }
]
const router = new VueRouter({

  routeMap

}),

把routeMap改为routes 或者下面介个样子的，你试一下

const router = new VueRouter({
routes: [

{ path: '/login', component: Login },
{ path: '/home', component: Home }

]
})

回复收藏 0

她说她爱他 2022-09-11 00:13:01

const routeMap = [
{ path: '/login', component: Login },
{ path: '/home', component: Home }
]
const router = new VueRouter({
routes:routeMap//如果你的路由列表声明不叫routes应该是不能简写的
}),

回复收藏 0

~没有更多了~