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