1.路由模块在封装时一般不会直接封装在main.js中因为在子组件较多的情况下可能会导致main.js过于冗余因此我们一般将路由模块单独封装在src下的router下2.声明式导航router-link内容/router-link与a/a作用一致并且渲染后本质就是a但是router-link在选中选项时会给被选中的选项添加两个类的状态分别是router-link-extract-active和router-link-active这二者分别对应了精准匹配和模糊匹配。可以利用这个特性来实现选中框变为高亮的功能使用一个样式就可以实现:​​这里精确匹配和模糊匹配的区别在于精确匹配在点击子组件时状态类消失而模糊匹配则是在点击子组件时状态类依旧保留这两个状态类的名字我们是可以在对应的router实例中自定义的3.声明式导航路由跳转传参语法格式to/path?keyvalue接受方收到时$route.query.key4.动态路由传参语法格式to/path/value须在router实例中进行path的改写原地址/:名字接收方$route.params.在router实例中定义的名字如图中的words使用实例先改写router实例中的路径写跳转规则接收参数5.路由重定向一般用于解决边界问题用户在跳转到意料之外的情况下可以用重定向导向错误页面或者是主页面写在router实例中的routes属性中语法{path:错误的路径,redirect:重新导向的路径}实例解决访问404问题在view中定义提示错误的组件在router实例中进行逻辑的编写这里的*就代表了所有的地址写在最下面上面如果都匹配不上就走这一条路由的配置模式hash/historyhash会在地址前加一个#/而history则是常见的形式二者可以在routers实例中用modehash/history进行配置6.编程式导航实现特定跳转的形式并且动态改变跳转时传递的参数原生的实现方式有两种(1)patha.语法this.$router.push(’path?keyvalue‘)语法this.$router.push(’path/value‘)b.语法: this.$router.push({path?keyvalue})语法:this.$router.push{(’path/value‘)}c.语法this.$router.push({path ,query:{keyvalue}})语法:this.$router.push({path,params:{router实例中的参数名value}})(2)namea.语法this.$router.push(’name?keyvalue‘)语法this.$router.push(’name/value‘)b.语法: this.$router.push({name?keyvalue})语法:this.$router.push{(’name/value‘)}c.语法this.$router.push({name ,query:{keyvalue}})语法:this.$router.push({name,params:{router实例中的参数名value}})注意这里name的写法需要在router实例的routes属性中填写name如7.使用VueCli自定义创建项目可以避免使用默认项目后再进行添加插件一次到位步骤如下第一步在指定的工作区间目录打开powershell创建项目第二步选择项目需要具备的特性第三步选择基于哪个vue版本进行创建第四步选择路由模式第五步选择css样式预处理器第六步选择哪套css配置规范第七步:保存上面的配置第八步是否将上面创建项目的配置方式保存起来