vue知识点总结 --- router路由

index.js

import Vue from 'vue'
import Router from 'vue-router'

import Routes from './modules/routes'

Vue.use(Router)

export default new Router({
    routes: Routes,
    mode: 'history',        //采用history路径模式，去掉路径中的#
    // 路由跳转事件
    // to、from为路由对象，savedPosition为页面滚动距离
    scrollBehavior (to, from, savedPosition) {
        // 如果有页面滚动，下次跳转到该路由时回到当初滚动位置
        if (savedPosition) {
            return savedPosition
        } else {
            return {x: 0, y: 0}
        }
    }   
})

routes.js

import Home from '../../views/Home.vue'
import TextOne from '../../views/textOne.vue'
import TextTwo from '../../views/textTwo.vue'

export default [
  {
    path: '/',
    redirect: '/home'        // 默认跳转
  },
  {
    path: '/home',
    name: 'home',
    component: Home
  },
  {
    path: '/textOne',
    name: 'textOne',
    component: TextOne,
    children: [
        {
            path: '/textTwo',
            name: 'textTwo',
            component: TextTwo
        }
    ]
  }
]

// <router-view/>占据的地方就是组件显示的地方。所以要显示子路由'textOne/textTwo',要在textOne.vue页面加入<router-view/>

• 路由传参(1)

  // 路由配置
  {
      path: '/textOne/:id',
      component: TextOne
  }

  <router-link to='/textOne/123'>

  // 子路由页面获取参数
  export default {
      mounted () {
          console.log(this.$route.params.id)
      }
  }

   

• 路由传参(2) -- 通过props传参

  // 路由配置
  {
      path: '/textOne/:id',
      component: TextOne,
      props: true
      //可以自定义参数
      //props: {id: '456'}
      //可以自定义方法: route为this.$route对象
      //props: (route) => ({id: route.query.a})
  }
  // 此时，参数会被当作props传入

  // 子路由页面获取参数
  export default {
      props: ['id'],
      mounted () {
          console.log(this.id)
      }
  }

   

• 一个路由内包含多个<router-view/>的情况
   

  <template>
    <div id="app">
      <router-view/>
      <router-view name="a"/>
    </div>
  </template>

  export default [
    {
      path: '/home',
      name: 'home',
      components: {
          default: TextOne,
          a: TextTwo
      }
    }
  ]

   

• 路由守卫
  作用于路由对象：

  const router = new Router({
    routes: Routes,
    mode: 'history'
  })
  
  // 每次跳转的时候触发
  // 应用场景可以为：
  // 1.登陆验证，未登陆时跳转到登陆页面
  // 2.某个页面不允许跳转
  router.beforeEach((to, from, next) => {
    if (to.fullPath === '/textOne') {
      next({ path: '/textTwo', replace })
    }
  })
  // replace意思是不向history的载堆里面加一条，这样返回的话是回到上上个页面，把这次跳转忽略掉了
  
  // 每次跳转的时候触发
  router.beforeResolve((to, from, next) => {
    console.log('beforeResolve')
    next()
  })
  
  // 每次跳转之后触发
  router.afterEach((to, from) => {
    console.log('afterEach')
  })
  
  export default router
  

  作用于单个路由项：

  import Home from '../../views/Home.vue'
  import TextOne from '../../views/textOne.vue'
  import TextTwo from '../../views/textTwo.vue'
  
  export default [
    {
      path: '/',
      redirect: '/home'
    },
    {
      path: '/home',
      name: 'home',
      component: Home
    },
    {
      path: '/textOne',
      name: 'textOne',
      component: TextOne,
      beforeEnter: (to, from, next) => {
        next()
      }
    },
    {
      path: '/textTwo',
      name: 'textTwo',
      component: TextTwo
    }
  ]
  

  组件内部的钩子：

  export default {
    props: ['id'],
    beforeRouteEnter (to, from, next) {
      // 通过props传参时，可用如下方式获取参数
      next(vm => {
        console.log(vm.id)
      })
    },
    // beforeRouteUpdate使用场景：复用同一个组件，传不同参数时，可用于取参数
    beforeRouteUpdate (to, from, next) {
      next()
    },
    // beforeRouteLeave使用场景：提醒是否离开
    beforeRouteLeave (to, from, next) {
      next()
    }
  }