vue路由讲解

总结：

• 路由分为 编程式路由和声明式路由
• 定义路由对象

• const router = new VueRouter({
      routes:[
          {
              path: '/',
              name: '',
              // redirect: '/index', 路由重定向的位置（意思就是要把页面定向到哪一个页面）
              redirect: {
                  // 可以是下面五种跳转方法中的任何一种方式
              },
              component: 组件文件
          },
          {
              path: '/index',
              name: '',
              component: index
          }
      ]
  })
  new Vue({
      el: '#app',
      router
  })
  

  声明式路由

• <div id="app">
      <router-view></router-view>
      <!-- 最简单的写法 -->
      <router-link to="这里是要跳转的页面的path"></router-link>
      <router-link to="这里是要跳转的页面的name"></router-link>
      <!-- 第二种写法 -->
      <router-link :to="{
          path: '这里是要跳转的页面的path',
          query: {
              <!-- 要携带的参数 这里以键值对的形式书写 参数会显示在要去的页面的路由地址上 -->
          }
      }"></router-link>
      <!-- 第三种写法 -->
      <router-link :to="{
          name: '这里是要跳转的页面的路由对象的name',
          query: {
              <!-- 要携带的参数 这里以键值对的形式书写 参数会显示在要去的页面的路由地址上 -->
          }
      }"></router-link>
      <!-- 第四种写法 -->
      <router-link :to="{
          name: '这里是要跳转的页面的路由对象的name',
          params: {
              <!-- 要携带的参数 这里以键值对的形式书写 参数'不会'显示在要去的页面的路由地址上 -->
          }
      }"></router-link>
  </div>
   
  

  编程式路由写法

• <button @click="pageTurn"></button>

  methods: {
      pageTurn() {
          // 第一种写法
          this.$router.push({
              path: '要跳转的页面的路由对象的path'
          })
          // 第二种写法
          this.$router.push({
              name: '要跳转的页面的路由对象的name'
          })
          // 第三种写法
          this.$router.push({
              path: '要跳转的页面的路由对象的path',
              query: {
                  // 要携带的参数 这里以键值对的形式书写 参数会显示在要去的页面的路由地址上
              }
          })
          // 第四种写法
          this.$router.push({
              name: '要跳转的页面的路由对象的name',
              query: {
                  // 要携带的参数 这里以键值对的形式书写 参数会显示在要去的页面的路由地址上
              }
          })
          // 第五种写法
          this.$router.push({
              name: '要跳转的页面的路由对象的name',
              params: {
                  // 要携带的参数 这里以键值对的形式书写 参数'不会'显示在要去的页面的路由地址上
              }
          })
      }
  }
  

  导航守卫

• 全局导航守卫

• const router = new VueRouter({
      routes:[
          {
              path: '/',
              name: '',
              component: 组件文件,
              // 路由独享守卫
              beforeEnter: (to, from, next) => {
                  // to 要去到的页面的路由对象
      // from 要离开的页面的路由对象
      // next() 下一步要执行的逻辑 在next()中如果不传递任何参数 则直接进入to对应的页面
      // 如果next中传入一个页面的路由对象的path则next() 不会跳转到to的页面 而是会跳转到传递的path的路径的页面
      // 在next中也可以传递一个对象 这个对象可以使用上述（编程式路由中的任何一种跳转方法）的跳转方法中的任何一种
              }
          }
      ]
  })
  // 全局前置守卫
  router.beforeEach((to, from, next) => {
      // to 要去到的页面的路由对象
      // from 要离开的页面的路由对象
      // next() 下一步要执行的逻辑 在next()中如果不传递任何参数 则直接进入to对应的页面
      // 如果next中传入一个页面的路由对象的path则next() 不会跳转到to的页面 而是会跳转到传递的path的路径的页面
      // 在next中也可以传递一个对象 这个对象可以使用上述（编程式路由中的任何一种跳转方法）的跳转方法中的任何一种
  })
  // 全局解析守卫
  // router.beforeReslove((to, from) => {
  
  // })
  //  全局后置守卫
  // router.afterEach((to, from) => {
  
  // })
  // 组件内的守卫
  Vue.component('child', {
      template: '',
      data() {
          return {}
      },
  beforeRouteEnter(to, from, next) {
  // to 要去到的页面的路由对象
      // from 要离开的页面的路由对象
      // next() 下一步要执行的逻辑 在next()中如果不传递任何参数 则直接进入to对应的页面
      // 如果next中传入一个页面的路由对象的path则next() 不会跳转到to的页面 而是会跳转到传递的path的路径的页面
      // console.log(this)// 注意 这里的this指向的是window对象
      next(vm => {
          // vm指向vue的实例化对象
      })
  }
  beforeRouteUpdate(to,from, next) {
  // to 要去到的页面的路由对象
      // from 要离开的页面的路由对象
      // next() 下一步要执行的逻辑 在next()中如果不传递任何参数 则直接进入to对应的页面
      // 如果next中传入一个页面的路由对象的path则next() 不会跳转到to的页面 而是会跳转到传递的path的路径的页面
  }
  // 离开守卫通常用来禁止用户在还未保存修改前突然离开
  beforeRouteLeave(to,from, next){
  
  }
  })
  new Vue({
      el: '#app',
      router
  })