vue-router 知识点合集（一）

1，指定路由跳转页面的方式，有两种，如下

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

2，router-link路由组件，默认是指向a标签，如果想转换为其他标签，使用tag属性，指定标签。如图指向li标签。

<router-link to="/home" tag="li">home</router-link>

3，路由切换默认是鼠标点击时执行，如果想鼠标移入切换路由，设置event属性为mouseover。如图：

<router-link to="/home" event="mouseover">home</router-link>

4，设置路由选中时的样式，有两种方式。

一是全局设置

export default new Router({
  linkActiveClass:'is-active',       //全局设置样式的类名
  routes: [
    {
      path: '/home',
      name: 'home',
      component: Home
    },
  ]
})

二是局部设置

<router-link to="/about" active-class="active-class" >about</router-link>

5，重定向路由

export default new Router({
  mode:'history',
  linkActiveClass:'is-active',
  routes: [
    {
      path: '/home',
      name: 'home',
      component: home
    },
    {
      path: '/document',
      name: 'document',
      component: document
    },
    {
      path: '/about',
      name: 'about',
      component: about
    },
    {
      path:'*',        //当跳转的是其他路径时，重定向到指定的路径
      //重定向路由有以下几种方式
      // redirect:Home
      // redirect:{path:'/home'}
      // redirect:{name:'home'}
      redirect:(to)=>{   //动态设置重定向的目标
        //目标路由对象，就是访问路径的路由信息
       if(to.path==='/123'){
         return '/home'
       }else if(to.path==='/456'){
         return {path:'/document'}
       }else{
         return {name:'about'}
       }
      }
    }
  ]
})

6，设置根路由时，当其他路由元素激活时，根路由还是激活状态，怎么设置。加属性exact。

 <router-link to="/" exact event="mouseover" tag="li">home</router-link>

7，嵌套路由

export default new Router({
  mode:'history',
  linkActiveClass:'is-active',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/document',
      name: 'document',
      component: document
    },
    {
      path: '/about',
      name: 'about',
      component: about,
      children:[
        {
          path:'',   //默认子路由   /about
          component:study
        },
        {
          path:'work',
          component:work
        },
        {
          path:'hobby',
          component:hobby
        }
      ]
    },
   
    }
  ]
})



<template>
<div>
  <div>
    我是about
  </div>
  <hr>
  <ul class="nav1">
    <router-link to="/about" exact tag="li">study</router-link>
    <router-link to="/about/work" tag="li">work</router-link>
    <router-link to="/about/hobby" tag="li">hobby</router-link>
  </ul>
  <hr>
  <router-view></router-view>
</div>
</template>

8，路由的命名视图

export default new Router({
  mode:'history',
  linkActiveClass:'is-active',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/document',
      name: 'document',
      components: {
        default:document,
        slider:slider
      }
    },
   
    }
  ]
})

<template>
  <div id="app" class="main">
    <ul class="nav">
        <router-link to="/" exact event="mouseover" tag="li">home</router-link>
        <router-link to="/document" tag="li" event="mouseover">document</router-link>
        <router-link to="/about" tag="li" active-class="active-class" event="mouseover">about</router-link>
    </ul>
    <router-view name="slider"></router-view>
    <router-view class="center"></router-view>
  </div>
</template>

9，记录滚动行为，点击前进后退时，保持每个页面的滚动行为不发生变化

第一个是使用坐标记录滚动条的位置

export default new Router({
  mode:'history',
  linkActiveClass:'is-active',
  scrollBehavior(to,from,savePosition){
    console.log(to)  //要进入的目标路由对象   要去向哪里
    console.log(from) //要离开的路由对象 从哪里来
    console.log(savePosition) //记录滚动条的坐标，点击前进后退时记录值
    //当有滚动行为时，记录滚动条的坐标
    if(savePosition){
      return savePosition
    }else{
      return {x:0,y:0}
    }
  },

第二个是使用hash值定位元素

//子组件
<template>
    <div style="height: 2000px">
      我是document
      <p id="abc">定位到这个元素</p>
    </div>
</template>

//父组件
<router-link to="/document#abc" tag="li" event="mouseover"> 
document
</router-link>

//路由配置
export default new Router({
  mode:'history',
  linkActiveClass:'is-active',
  scrollBehavior(to,from,savePosition){
    console.log(to)  //要进入的目标路由对象   要去向哪里
    console.log(from) //要离开的路由对象 从哪里来
    console.log(savePosition) //记录滚动条的坐标，点击前进后退时记录值
    //当有滚动行为时，记录滚动条的坐标
  /*  if(savePosition){
      return savePosition
    }else{
      return {x:0,y:0}
    }*/
  if(to.hash){
    return {
      selector:to.hash
    }
  }
  },
})

这次就知道这里，下次继续总结