vue-router学习总结

一.vue-router

作用：通过管理url,实现url和组件的对应和通过Url进行组件之间的切换

二.hash和history模式

1.默认情况下使用hash模式，即#/path
2.history模式：
    mode: 'history', // router实例里面添加该属性
    // 配合router-link使用,to目标path
    <router-link to="/home"></router-link>

三.router-link各项配置

1. <router-link to="/home"></router-link> 默认写死path
2. <router-link :to="data"></router-link> path动态设置
3. <router-link :to="{path: '/document'}"></router-link> 对象形式
4. <router-link :to="data" tag="div"></router-link> 默认生成a标签，设置成div标签
5. router-link自定义class router实例内定义
    `linkActiveClass:'is-active',`
6.通过给<router-view class="common"></router-view>  添加class设置公共的样式，自动给对应的组件根节点添加common样式
7.给路由链接添加自定义时间<router-link event="mouseover"></router-link> 添加鼠标移入时间

四.重定向

{
     path: '*', //通配符
      name: '404',
      component: error，
      //redirect: {path: '/path'},
      //redirect: '/path',
      //redirect: {name: 'name'},
      redirect: (to) => { //动态设置重定向的目标
          // to目标路由对象,访问的路由信息，必须return 返回值
           if (to.path === '/path1') {
                return '/path1'
           } else if (to.path === '/path2') {
               return {path: '/path2'}
           } else {
             return {name: 'test'}
           }
            return '/home';
      }
 },

五.动态路径参数

<router-link to="'/about' + userId"></router-link>
// router实例对象内
{
     path: '/about/:userId?',//动态匹配参数
     name: 'about',
     component: about
   },
// 获取动态路径参数(params存放动态参数)
this.$route.params.对应参数

六.路由元

在路由配置meta可以配置一些数据，用在路由信息对象中
访问meta中数据，$route.meta

 {
      path: '/about/:used?',
      name: 'about',
      // 配置meta属性
      meta: {
        index: 1,
      }
      component: about
    },