vue-router 知识点合集（一）

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

home
home

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

home

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

home

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

一是全局设置

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

二是局部设置

about

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。

 home

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
        }
      ]
    },
   
    }
  ]
})

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
      }
    },
   
    }
  ]
})

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值定位元素

//子组件

//父组件
 
document

//路由配置
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
    }
  }
  },
})

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