Vue-Router 编程式导航

Posted 2020-12-29 hjptopshow

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