vue学记笔记(八) Vue路由传参数，动画和钩子函数

Vue 路由传参

动态路径传参数

比如我们要传递的路径 /hi/hahah/123 第一个是组件名 第二个，第三个是参数

(1) 路由里面配置参数

看路径 利用冒号绑定好参数

{
      path:'/Hi/:username/:id',
      name:"Hi",
      component:Hi,
      children:[

        {path:"hi1",name:"Hi1",component:Hi1},
        {path:"hi2",name:"Hi2",component:Hi2},
      ]
    }

(2) 组件里面输出

{
  {
    $route.params.username
  }
}

{
  {
    $route.params.id
  }
}

路由跳转参数的两种方法

• 是利用 query 方式传递参数

• 是利用 params 方式传递参数

利用 query 方式传递参数

<script>
  传参:
  this.$router.push({
          path:'/xxx'
          query:{
            id:id
          }
        })

  接收参数:
  this.$route.query.id
</script>

利用 params 方式传递参数

<script>
  传参:
  this.$router.push({
          name:'xxx'
          params:{
            id:id
          }
        })

  接收参数:
  this.$route.params.id
</script>

注意:params 传参，push 里面只能是 name:’xxxx’,不能是 path:’/xxx’,因为 params 只能用 name 来引入路由，如果这里写成了 path，接收参数页面会是 undefined！！！另外，二者还有点区别，直白的来说 query 相当于 get 请求，页面跳转的时候，可以在地址栏看到请求参数，而 params 相当于 post 请求，参数不会再地址栏中显示.另外要是通过 query 传值，页面刷新的话参数不丢失

Vue 动画

• 想要路由有过度动画效果只需要在 router-view 外部加载一个 transition 标签即可

<transition name="gotop" model="out-in">
  <router-view class="allcontent"></router-view>
</transition>

name 就是 css 类前面开头制定的名称，model 就是执行的顺序，他有两个。第一个是 out-in 第二个是 in-out

• 然后在 css 里面写

<style>
  .gotop-enter-active,
  .gotop-leave-active {
    transition: all 0.4s linear;
  }
  .gotop-enter,
  .gotop-leave-to {
    transform: translate(0, 100%);
  }
  .gotop-leave,
  .gotop-enter-to {
    transform: translate(0, 0);
  }
</style>

Vue 导航里面的钩子函数

• 第一种就是全局匹配 beforeeach

• 第二种就是单个路由下面写配置,beforeEnter

• 第三种就是组件里面写钩子函数 beforeRouterEnter

(1) 全局匹配

一般情况我们管这个叫路由守卫，简称全拦，他一般有 3 个参数 to from next 表示通过才跳转,一般写在 main.js 里面

to 表示要跳转的路径信息,from 表示从哪里来的,next 表示路由控制的参数,通过与否

代码如下

router.beforeEach((to, from, next) => {
  // 设置延时器让created先执行在进行路由跳转
  // 取出token值
  let value = storgeMemery.getvalue('token') // 取出来token
  setTimeout(res => {
    // 判断该路由是否需要登录权限
    if (to.name === 'Login') {
      next()
    } else {
      if (value) {
        next()
      } else {
        next({
          path: '/login',
          query: {
            redirect: to.fullPath
          } // 将跳转的路由path作为参数，登录成功后跳转到该路由
        })
      }
    }
  }, 100)
})

(2) 单个路由下配置

{
      path: '/',
      name: 'HelloWorld',
      components: {
        default: HelloWorld,
        left: Hi1,
        right: Hi2,
      }
    },
beforeEnter:(to,from,next)=>{
    console.log("我进来了");
    console.log(to);
    console.log(from);
    next()
}

(3)组件里面写钩子函数 beforeRouterEnter,beforeRouterLeave

export default {
      name:"Hi2",
      data(){
         return {
           message2:"这个就是Hi2页面"
         }
      },
beforeRouterEnter:(to,from,next){
  console.log("我进来了")
}.
beforeRouterLeave:(to,form,next){
  console.log("我离开了")
}
    }