Vue-Router(三) 编程式导航

Vue-Router(三) 编程式导航
在 vue 中，咱们除了使用 建立 a 标签来定义导航连接以外，还可使用 router 实例方法，经过编写代码的方式来实现

router.push(location)
想要导航到不容的 URL，咱们可使用建立多个 ，固然也可使用 router.push() 方法。其实，点击 就至关于调用 router.push()

声明式	编程式
< router-link :to=”…”/>	router.push(…)


router.push() 方法会向 history 栈添加一个新的记录，因此点击浏览器后退按钮的时候，浏览器会退回到以前的 URL。 
该方法的参数能够是一个字符串路径，也能够是一个描述地址的对象，例如：

    // 字符串
    router.push('home')

    // 对象
    router.push({ path: 'home' })

    // 命名的路由
    router.push({ name: 'user', params: { userId: 123 }})

    // 带查询参数，变成 /register?plan=private
    router.push({ path: 'register', query: { plan: 'private' }})

router.replace(location)
这个方法跟 push 很像，只不过他并不会像 history 中添加新的记录，就像它的方法名称同样，replace 替换掉当前的 history 记录

声明式	编程式
< router-link :to=”…” replace>	router.replace(…)


router.go(n)
这个方法就是一个整数，意思就是在 history 中前进或者后退多少步，相似于window.history.go

    // 在浏览器记录中前进一步，等同于 history.forward()
    router.go(1)

    // 后退一步记录，等同于 history.back()
    router.go(-1)

    // 前进 3 步记录
    router.go(3)

    // 若是 history 记录不够用，那就默默地失败呗
    router.go(-100)
    router.go(100)

其实这几个方法就跟 window.history 中的 window.history.pushState、 window.history.replaceState 和 window.history.go 很像，有兴趣的小伙伴 
能够去看一下 Browser History APIs 点这里点这里

介绍完了方法，咱们就看一下项目中的实际应用吧

首先在 components 目录下新建一个登陆界面和一个登陆成功界面，分别命名为login.vue和loginSuceess.vue

而后咱们在验证成功以后进入登陆成功界面，成功界面里面有个注销按钮，注销的时候先弹窗确认在退出到登陆界面

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>

    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <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>
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>

    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>

    </style>
接下来咱们来配置一下路由

    // 导入组件 和 依赖
    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
        }
      ]
    })
这样路由就配置好了，如今咱们来运行它，demo略简陋，见谅

npm run dev