Vue-Router(三) 编程式导航

login.vue

    <template>
      <div class="hello">
        <input type="text" v-model="loginName"><br>
        <input type="password" v-model="passWord"><br>
        <button @click="loginSub">登录button>
      div>
    template>

    <script type="text/ecmascript-6">
      import ProsAndEmit from './testPropsAndEmit'
      export default {
        name: 'hello',
        data () {
          return {
            msg: 'Welcome to Your Vue.js App',
            loginName: '',
            passWord: ''
          }
        },
        methods: {
          loginSub () {
            console.log('登录名:' + this.loginName + ',密码:' + this.passWord)
            // 纯数字
            let number = /^.*[^\d].*$/
            // 随便验证一下
            if (this.loginName === '') {
              alert('请输入登录名')
              return
            }
            if (!number.test(this.loginName)) {
              alert('login Success!')
              // 验证成功进入 loginSuccess
              this.$router.push('loginSuccess')
            } else {
              alert('登录名为纯数字！')
            }
          }
        },
        components: {
          ProsAndEmit: ProsAndEmit
        }
      }
    script>

    
    <style scoped>
      h1, h2 {
        font-weight: normal;
      }

      ul {
        list-style-type: none;
        padding: 0;
      }

      li {
        display: inline-block;
        margin: 0 10px;
      }

      a {
        color: #42b983;
      }
    style>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64

loginSuccess.vue

    <template>
      <div>
        <button @click="layOut">注销button>
      div>
    template>

    <script type="text/ecmascript-6">
        export default {
          methods: {
            layOut () {
              alert('注销成功！')
              // 注销成功 返回登录界面
              this.$router.go(-1)
              console.log(123)
            }
          }
        }
    script>

    
    <style scoped>

    style>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25

接下来我们来配置一下路由

    // 导入组件 和 依赖
    import Vue from 'vue'
    import Router from 'vue-router'
    import login from '@/components/login'
    import LoginSuccess from '@/components/loginSeccess'
    // 告诉 vue 你要使用 route
    Vue.use(Router)
    // 定义路由配置项并导出
    export default new Router({
      mode: 'history',
      redirect: 'goodslist',
      routes: [
        {
          path: '/',
          name: 'login',
          component: login
        },
        {
          path: '/loginSuccess',
          name: 'loginSuccess',
          component: LoginSuccess
        }
      ]
    })