2-vue-router相关API

• hash和history模式的设定

  mode:'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: home
    }
  ]
})

• router-link

其实就是导航，根据to属性去匹配对应的组件，然后渲染到正确位置。
如果用a标签，页面会发生跳转。默认router-link会渲染成a标签；

• tag="要生成的标签名"，页面会生成指定的标签；并且不需要自己监听事件，vue-router都自动监听;

   <router-link  :to="{path:'/home'}" tag="li">
    <i></i><span>home</span>
   </router-link>

• to:要跳转到的目标文件；可以用':to'，去动态绑定;

<router-link :to="index">home</router-link>
<!--对象形式-->
<router-link :to="{path:'/home'}">home</router-link>
export default {
  data(){
      return {
          index : '/home'
      }
  }
}

• tag:设置生成指定的标签

  <router-link :to="{path:'/home'}" tag="div">home</router-link>

• linkActiveClass : 设置导航激活的class

new Router({
  mode:'history',
  linkActiveClass:'isActive',
  ]
})

• active-class : 设置单独的、独有的自己的激活状态颜色（比如每个导航激活颜色不同）

 <router-link to="/document" tag="li" active-class="activeClass">document</router-link>

• event : 指定事件

<router-link :to="{path:'/home'}" event="mouseover" tag="li">home</router-link>

• name : 为组件命名
  如果路径很多，在每个router上都写路径，而且如果路径嵌套复杂，就会一不小心就出错，而且很麻烦，这个时候就可以给每个组件添加name属性

<router-link   :to="{name:'study'}" >

• 重定向

比如用户输入了一个错误的路径，常见的就是给出一个404或者跳转到首页。

{
      path: '*',
      //直接渲染一个组件 component: noFound
      //重定向 : 直接定到指定的组件  redirect : '/home'
      //redirect : {path:'/home'}
      //利用组件上的name redirect:{name : 'document'}
      redirect:(to)=>{
        //to:目标路由对象，就是访问的路径的路由信息
        if(to.path === '/123'){
          return '/home'
        }else if(to.path === '/456'){
          return {path:'/document'}
        }

      }
    }

• 别名 ： alias

比如，你在地址栏输入了/index,希望这个地址渲染的是home，这个时候就可以在组件的配置上写别名

routes: [
    {
      path: '/home',
      name: 'home',
      component: home,
      alias : '/index'
    }
]

• exact：其他路径被点亮的时候去掉根路径的active

<router-link exact  to="/" >
routes: [
    {
      path: '/',
      component: home,
    }
]

• 嵌套路由的使用(在父路由中切换)

图示：

image.png

注意，如果路由中，有了子路由，就不要把name给父路由设置，直接设置子路由即可，否则浏览器会警告提示。

{
      path: '/about',
      //如果有默认子路由，父级就不要设置name了 name: 'about',
      component: about,
      children:[
        {
          //默认子路由
          path : '',
          name : study,
          component : study
        },
        {
          path : 'hobby',
          name : hobby,
          component : hobby
        },
        {
          path : 'work',
          name : work,
          component : work
        }
      ]
    }

• 路径设置：现在about下面有三个组件，如果现在想实现：进入一个子理由的时候，地址栏不显示其父路由（about/work==>/work）,这时只需要在子路由path中加一个/（/的意思是相对根路由）

{
  path : '/hobby',
  name : 'hobby',
  component : hobby
 }

• 命名视图

image.png

概念：就是对router-view标签起一个名字；
使用场景：当遇到同一个单页面组件里，需要出现两个或多个router-view时，就需要对标签命名了；

命名方法：

1. 通过name属性起名
   <router-view name="slider"></router-view>

   new VueRouter({
      routes:[
      { 
        path:'/document',
        components:{
          default:document， //default为默认组件
          slider:slides
          //slider:写的是标签中的name值；
          //slides：写的是slides这个名字的.vue文件，需要引入到页面中
        }
     }
   ]

});

注意：是在对应的路由中添加；

• 滚动行为：

浏览器滚动默认行为说明：当页面滚动到一定位置后，手动刷新浏览器，会发现页面依然在之前滚动位置，这是浏览器记录滚动位置的默认行为；

需求：点击浏览器的前进和后退的按照时，让打开的页面，保持在之前页面滚动的位置；

步骤：

new VueRouter({
    scrollBehavior(to,from,savedPosition){//滚动行为，在点击浏览器的前进后退或切换导航时，触发
      //to:要进入的目标路由对象  (要去哪里)
      //from:离开的路由对象      (从哪里来)
      //savadPosition：记录当前滚动位置滚动条的坐标，点击前进后退时，坐标值   {x:0,y:0}  
      if(savePosition){
        return savePosition;  //这样就可以定位到之前的位置啦
    }else{
        return {x:0,y:0}
    }
    }
});

• 动态路径：

不同的路径（路由），映射同一个组件。比如进了一个网站，到了个人信息页面中，每个人信息页面其实一样的，只是不同等级的用户展示的数据不同，这个时候就可以用到动态路径。匹配到的所有路由，全都映射到同一个组件。
场景： 根据不同用户展示不同的信息。
实现思路 ： 这个时候其实用的是同一个组件，只是展示的数据不同。首先需要在导航标签（router-link）的to属性上设置成动态的，也就是不同的用户数据拼接而成，然后在组件上配置同样的参数，这个时候就可以用路由信息对象获取到用户的id，如果获取的id和数据里的某一项id相同，就把这条数据放入自己在data数据中新建的json上，数据绑定的是这个json

image.png

• 动态路径参数,以冒号开头
  路径：/user/:userId ==>：userId为动态路径参数
  userId可以使用正则符表示
  如：
  匹配 /user/:userId 有userId和没有userId的都需要匹配上，可以写成：
  path:/user/:userId?
  说明 ： 这里的userId？表示有userId和无userId都能匹配

注意：在路由path中，添加动态参数方法是 (:参数名)，这里可以加多个；
如：user/:userId/:tip

{
      /*
        这个userId是自己随意定义的，:userId意思就是动态的，当访问user后面嵌套一个路径的时候，
        这个userId就等于标签里写好的名字
        :to="'/user/'+item.id"
      */
      // 这里的userId？表示有userId和无userId都能匹配,/user和/user/1 都可以匹配
      /*
        ********思路**********：
        1、通过路径，就可以拿到userId，拿到userId，就可以找到对应的用户信息；
        2、怎么拿到userId ？ 只需要拿到路由信息，就可以拿到这个值了。
        3、怎么拿到路由信息？看下一个API ：对组件注入.
      */
      path: '/user/:userId?', //user/1  user/2
      component: user,
    },

• 如何拿到动态路由的信息：对组件的注入&获取参数：路由信息对象的params

一个 route object（路由信息对象） 表示当前激活的路由的状态信息，包含了当前 URL 解析得到的信息，还有 URL 匹配到的 route records（路由记录）。

通过在VUE根实例的router配置传入router实例

• $router router实例对象
• $router 当前激活的路由信息对象，每个组件实例都会有；
• beforeRouterEnter() 进入组件前钩子函数
• beforeRouterLeave() 离开组件前钩子函数

贴$route源码如下 ： 
export default {
     watch : {
           $route(){
            let id = this.$route.params.userId;
            for(var i = 0;i<this.userList.length;i++){
              if(id==this.userList[i].id){
                this.userInfo=this.userList[i]
              }
            }
          }
      },
      created(){
        //复用这个组件，这个函数不会再次被调用了,所以需要用watch监控
        //地址一但发生变化 ，$route会重新生成一个路由信息对象
        //:this.$route.params.userId这样就得到了动态参数userId ： path: '/user/:userId?',
        let id = this.$route.params.userId;
        for(var i = 0;i<this.userList.length;i++){
            if(id==this.userList[i].id){
              this.userInfo = this.userList[i]
            }
        }
      }
 }

image.png

• 查询字符串：

带查询参数的链接地址，称为：查询字符串。

//下面的结果为 /user?info=share
<router-link :to="{ path: '', query: { info: 'share' }}">分享</router-link>

链接地址为：/user?info=share
在切换router-link时，如何获取查询字符串中，info=share的share字符串？
通过路由信息对象中的query对象，用于URL查询参数的对象；

• 过渡动效：

router 提供了transition的封装组件，添加过渡动画
控制方法：会用CSS类名控制

image.png

• 使用方法：
  将需要添加过渡效果的router-view包在transition标签中；如下 ：

<transition>
    <router-view></router-view>
</transition>

• 过渡模式：
  in-out: ： 新进行过渡，完成之后当前元素过渡离开
  out-in：当前元素先进行过渡，完成之后新元素过渡进入
  使用方法如下：

<transition mode="输入模式名">
    <router-view></router-view>
</transition>

• 案例 ：

 <transition  mode="out-in">
      <router-view class="center"/></router-view>
 </transition>
.v-enter{
    opacity:0
  }
  .v-enter-to{
    opacity:1
  }
  .v-enter-active{
    transition:1s
  }
  .v-leave{
    opacity:0
  }
  .v-leave-to{
    opacity:1
  }
  .v-leave-active{
    transition:0
  }
//以下的切换形式需要在transition上设置name属性，值为left
.left-enter{
    transform:translateX(100%)
  }
  .left-enter-to{
    transform:translateX(0)
  }
  .left-enter-active{
    transition:1s
  }
  .left-leave{
    transform:translateX(0)
  }
  .left-leave-to{
    transform:translateX(-100%)
  }
  .left-leave-active{
    transition:1s
  }

• 编程式的导航：

除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。

• back：回退一步
• forward : 前进一步

<input type="button" value="后退" @click="backHandel">
<input type="button" value="前进" @click="forwardHandel">
 methods:{
        backHandel(){
          this.$router.back()
        },
        forwardHandel(){
          this.$router.forward()
        }
}

• go : 指定前进回退步数

goHandel(){ //控制的是前进后退事件的步数
  this.$router.go(-1) //正数前进，负数后退
}

• push : 导航到不同url，向history栈添加一个新的记录
• replace : 导航到不同url,替换history栈中当前记录

  <input type="button" value="控制指定的导航push" @click="pushHandel">
  <input type="button" value="控制指定的导航replace" @click="replaceHandel">

  pushHandel(){ //跳转到指定的路径
    this.$router.push('/document') //正数前进，负数后退
    },
  replaceHandel(){
    this.$router.replace('/document')
  }

• 路由元信息：

在路由配置中meta可以配置一些数据，用在路由信息对象中。

• 访问meta中的数据：$route.meta

• 路由meta的设置方法：(在路由对象中配置)

routes:[
  {
   path:'/',
   meta:{
     index:0;//路由的下标
   }
  }
]

• 如果路由中有子路由，就配置到默认的子路由中，不用配置到父路由中；

• 页面中获取方法：

$route.meta.index

• 通过监听$route，得到目标和离开导航的下标

watch:{
  $route(to,from){
     to.meta.index //目标导航下标
     from.meta.index //离开导航下标
  }
}

• 导航钩子函数（全局级）

导航发生变化时，导航狗子主要用来拦截导航，让它完成跳转或取消。(例如：如果用户没有登录，就跳转到登录组件)

• 执行钩子函数位置（书写位置）

  router全局
  单个路由
  组件中

• 钩子函数

router实例上：beforeEach，afterEach
单个路由中：beforeEnter
组件内的钩子：beforeRouterEnter,beforeRouteUpdata,beforeRouteLeave

• 钩子函数接收的参数

to:要进入的目标路由对象，到哪里去
from:正要离开导航的里有对象，从哪里来
next:用来决定跳转或取消导航

{
  path: '/document',
  name: 'document',
  meta:{
    index:1,
    login:true,
    title : 'document'
  }
}
router.beforeEach((to,from,next)=>{ //目标路径，源路径，进入导航
  next() //必写，否则组件不会被渲染，参数写false,组件不会被渲染
  if(to.meta.login){ //如果meta的login是true,那么表示没有登录，跳转到login
    next('/login')
  }else{
    next() //否则就是登录了，渲染组件即可
  }
})
router.afterEach((to,from,next)=>{
  if(to.meta.title){//如果title存在，就改成组件自己的meta内的title
    window.document.title = to.meta.title
  }else{
    window.document.title = 'miaoei'
  }
})