路由--vue

Vue-router

两种模式
hash（默认）
history

嵌套路由
关键字：children

// 一级路由
{
      path: '/about',
      name: 'about',
      component: About,
      children: [ // 二级路由
        {
          path: '',
          name: 'about',
          component: Study
        }
      ]
},

router-link组件常见配置
tag
class

重定向

path: '*',
  redirect: '/'
  redirect: {
    // path: '/'
    name: 'home'
}

路由元信息
meta：{}

过渡动效

// template
<transition name="fade">
    <router-view />
 </transition>
​
// CSS
.fade-enter {
  opacity: 0;
}
.fade-enter-active {
  transition: 1s;
}
.fade-enter-to {
  opacity: 1;
}

路由传参

第一步：在目标路由配置要传递的参数， 类似以function 传参中的形参

{
    path: '/user/:userId?', 
    component: User
},

第二步：在目标路由的router-link上进行真实数据的传递，类似function中的实参

<router-link :to="'/user/' + item.id" v-for="item in userList">{{ item.userName }}</router-link>

第三步：在目标路由对应的组件内通过this.$route接收传递过来的参数

let { userId } = this.$route.params

传参方式
第一种：字符串拼接

// 传递
:to="'/user/' + item.id"
// 接收
this.$route.params.userId

第二种：params

// 传递
<router-link :to="{name:'user',params:{userId:item.id}}" v-for="item in userList">{{ item.userName }}</router-link>
// 接收
this.$route.params.userId

第三种：query

// 传递
<router-link :to="{path:'/user',query:{userId:item.id}}" v-for="item in userList">{{ item.userName }}</router-link>
// 接收
this.$route.query.userId

query VS params

显示上
query
http://www.wyf.com?id=0707
params
http://www.wyf.com/0707
用法上
query
传递的时候{path:’/user’,query:{userId:item.id}}
接收传递过来的数据通过：this. $route.query 路由表中的path: '/user/:userId?'中的/:userId?可以省略 params 传递的时候{name:'user',params:{userId:item.id}} 接收传递过来的数据通过：this.$route.params
路由表中的path: '/user/:userId?'中的/:userId?不可以省略

导航守卫

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。

类型
全局的
beforeEach - 前置钩子，进入之前干什么
afterEach - 后置钩子，进去之后干啥玩意儿
单个路由的
beforeEnter - 进入路由表中的某个路由前，干啥玩意儿
组件
beforeRouteEnter - 进入某个组件前
beforeRouteUpdate - 组件复用的时候触发
beforeRouteLeave - 离开组件

转载：https://blog.csdn.net/yhr0322/article/details/101977428