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?key=value",
接受方收到时:$route.query.key
4.动态路由传参:
语法格式:to="/path/value"
须在router实例中进行path的改写,'原地址/:名字'
接收方:$route.params.在router实例中定义的名字,如图中的words
使用实例:
先改写router实例中的路径:
写跳转规则:
接收参数:
5.路由重定向:一般用于解决边界问题
用户在跳转到意料之外的情况下可以用重定向导向错误页面或者是主页面
写在router实例中的routes属性中
语法:{path:错误的路径,redirect:重新导向的路径}
实例:解决访问404问题:
在view中定义提示错误的组件:
在router实例中进行逻辑的编写,这里的*就代表了所有的地址,写在最下面,上面如果都匹配不上就走这一条:
路由的配置模式:
hash/history:hash会在地址前加一个#/而history则是常见的形式,二者可以在routers实例中用mode="hash/history"进行配置;
6.编程式导航:实现特定跳转的形式,并且动态改变跳转时传递的参数;
原生的实现方式有两种:
(1)path
a.语法:this.$router.push(’path?key=value‘)
语法:this.$router.push(’path/value‘)
b.语法: this.$router.push({'path?key=value'})
语法:this.$router.push{(’path/value‘)}
c.语法:this.$router.push({'path' ,query:{key=value}})
语法:this.$router.push({'path',params:{router实例中的参数名=value}})
(2)name
a.语法:this.$router.push(’name?key=value‘)
语法:this.$router.push(’name/value‘)
b.语法: this.$router.push({'name?key=value'})
语法:this.$router.push{(’name/value‘)}
c.语法:this.$router.push({'name' ,query:{key=value}})
语法:this.$router.push({'name',params:{router实例中的参数名=value}})
注意这里name的写法需要在router实例的routes属性中填写name如:
7.使用VueCli自定义创建项目,可以避免使用默认项目后再进行添加插件,一次到位
步骤如下:
第一步:在指定的工作区间目录,打开powershell,创建项目:
第二步:选择项目需要具备的特性:
第三步:选择基于哪个vue版本进行创建:
第四步:选择路由模式
第五步:选择css样式预处理器
第六步:选择哪套css配置规范:
第七步:保存上面的配置:
第八步:是否将上面创建项目的配置方式保存起来?