VUE-Router常用知识总结

众所周知vue的相关生态是非常'丰满'的,其中vue-router就是官方出的生态,虽然官方已经有了很好的介绍了,但是其实大部分api我们可能都很少用到,文档显得很'臃肿',这里对常用方法进行一个总结和回顾,方便记忆。

$route——当前页面路由信息$router——全局路由信息

跳转路由的方法

router-link标签
router.push(location, onComplete?, onAbort?) js去做
router.replace 区别是不添加history记录
当然了a标签也是可以的
router.go(n)==window.history.go(n)

动态路由匹配

//router文件夹下 index.js

import Vue from 'vue' import Router from 'vue-router'// 探究一下vue-router
import vueRouterPlay1 from '@/page/vueRouterPlay/vueRouterPlay1.vue'
Vue.use(Router)
export default new Router({
  routes: [
    {
      // 动态路径参数 以冒号开头
      path: '/vueRouterPlay1/:id',//这里有变化
      name: 'vueRouterPlay1', //不需要变
      component: vueRouterPlay1 //不需要变
    }
  ]
})

获取动态路由id值    this.$route.params.id

嵌套路由

你可以理解为App.vue中的是路由最外层的出口，子组件中也可以有自己的

 //router文件夹下 index.js
import Vue from 'vue'
import Router from 'vue-router'
// 探究一下vue-router
import vueRouterPlay1 from '@/page/vueRouterPlay/vueRouterPlay1.vue'
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/vueRouterPlay1/:id',
      name: 'vueRouterPlay1',
      component: vueRouterPlay1,
      children: [{
        // 当 /vueRouterPlay1/:id/vueRouterPlay2 匹配成功，
        // vueRouterPlay2 会被渲染在 vueRouterPlay1 的 <router-view> 中
        path: 'vueRouterPlay2',
        component: vueRouterPlay2
      }]
    },
  ]
})

命名视图

需求：首页的头部比较特殊，我们以颜色区分，首页可能需要用到一个绿色的header，其他页面的头部则用红色的header。我们通过命名视图（name），来设置不同的路由中用不同的header和main模板。

<router-view  name="header"></router-view> //header
<router-view  name="main"></router-view> //内容区

//router文件夹下 index.js
import Vue from 'vue'
import Router from 'vue-router'
// 探究一下vue-router
import vueRouterPlay1 from '@/page/vueRouterPlay/vueRouterPlay1.vue'
import vueRouterPlay2 from '@/page/vueRouterPlay/vueRouterPlay2.vue'
import header1 from '@/page/vueRouterPlay/header1.vue'
import header2 from '@/page/vueRouterPlay/header2.vue'
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/vueRouterPlay1',
      name: 'vueRouterPlay1',
      components: { // 注意这里是components 复数复数复数！
        'header': header1, //设置header模板
        'main': vueRouterPlay1 //设置main模板
      }
    },
    {
      path: '/vueRouterPlay2',
      name: 'vueRouterPlay2',
      components: { // 注意这里是components 复数复数复数！
        'header': header2,
        'main': vueRouterPlay2
      }
    }
  ] 
})

重定向和别名

重定向和别名的使用场景其实差不多，你希望用户在访问/index.htm,/index.html,/index的时候展示的都是首页，算是提升了用户操作的容错率，两者的唯一区别就是，是否修改url。

重定向:redirect

 // 方式一：字符串路径path
{ path: '/a', redirect: '/b' }
// 方式二：name 
{ path: '/a', redirect: {name: 'b'} }
// 方式三：动态返回重定向目标
{ path: '/a', redirect: to => {
  /* 方法接收 目标路由 作为参数；return 重定向的 字符串路径/路径对象 */
}}

别名:alias

“重定向”的意思是，当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b，那么“别名”又是什么呢？

/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。

但是需要特别注意以下情况  如果别名和已经定义在前的路由名相同会无效!!!!
routes: [    {      path: '/a',      name: 'HelloWorld',      component: HelloWorld,    },    {      path:'/b',      name:'helloworld1',      component:HelloWorld1,      alias: '/a'   //无效,因为/a路由在前面已经定义过了(建议定义上下文并未使用过的别名)
      alias: '/c'   //有效,虽然/c也被定义了,但是它在此代码的后面 
                    //所以当url为/c时访问的还是组件helloworld1
    },    {      path: '/c',      name: 'HelloWorld2',      component: HelloWorld2,    },  ]

query 和params

// 方式一：字符串路径router.push('/user')// 方式二：path对象router.push({ path: '/user' })// 方式三：路由名称router.push({ name: 'user'})// 不生效
router.push({ path: '/user', params: { id: 1 }})
// params生效 /user/1
router.push({ name: 'user', params: { id: 1 }}) // 使用name方式
router.push({ path: `/user/1` }) // 直接在path上扩充
// query不受影响 /user?id=1
router.push({ path: '/user', query: { id: 1 }})

active-class

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

//路由懒加载
const vueRouterPlay1 = () => import('@/page/vueRouterPlay/vueRouterPlay1.vue')
const vueRouterPlay2 = () => import('@/page/vueRouterPlay/vueRouterPlay2.vue')