<!-- 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传递的参数 获取动态路由传递的参数