路由的总结

<!-- vue-router的总结 -->
    一、vueRouter的初始化配置
    1、路由的配置重点掌握路由表的开发
    路由表式浏览器访问的url【路径】（！！不是vue文件的路径！！）和页面组件的映射关系
    需要配置两个属性 path：浏览器访问的页面路径
    component 这个路径所映射的页面组件

    2、路由重定向的配置
    项目打开时的页面路径是 / 
    当访问 / 的时候需要配置一个重定向 redirect 将 / 从定向到指定页面

    3、404页面兜底
    当用户访问的页面在路由表中没有定义 此时需要有一个兜底页面
    path: '*', component: 404页面
    并且这个兜底应该写在数组的最底部

    二、路由的跳转
    1、使用a标签可以实现路由的跳转 配置href属性的时候要在前面添加一个 #333
    例如 < a href="#/home">
    2、使用声明式导航 使用VueRouter提供的<router-link></router-link>标签实现跳转 配置to属性
    例如 <router-link to="/home"></router-link>
    使用声明式导航跳转可以实现样式高亮 
    3、使用编程式导航 this.$router.push()实现页面的跳转
      （1）this.$router.push({path: '/home'}) => this.$router.push('/home') 简写方式
      （2）this.$router.push({name: 'home'})

    三、路由携带参数
    1、声明式导航携带参数
      （1）query传参 <router-link to="/home?参数的key=参数的value"></router-link>
      （2）params传参（动态路由传参）艺术 高级 优雅 层级明确
        <router-link to="/home/参数的值"></router-link>
        在路由表中需要配置path {path: '/home/:id'}
    2、编程式导航携带参数
      （1）通过path跳转
        this.$router.push({path: '/home', query: {id: 123}}) => this.$router.push('/home?id=123')
      （2）通过name跳转
        this.$router.push({name: 'home', query: {id: 123}})
        this.$router.push({name: 'home', params: {id: 123}})
    
    四、路由获取参数
      1、this.$route.query 获取query传递的参数
      2、this.$route.params 获取params传递的参数 获取动态路由传递的参数