您现在的位置是：首页 >技术教程 >Vue电商项目--项目路由网站首页技术教程

项目路由分析

vue-router
路由分为KV

node平台（并非语言）
对于后台而言:K即为URL地址   V即为相应的中间件

前端路由:
K即为URL（网络资源定位符）
V即为相应的路由组件

路由的一个分析
确定项目结构顺序:上中下 -----只有中间部分的V在发生变化，中间部分应该使用的是路由组件
2个非路由组件|四个路由组件
两个非路由组件：Header 、Footer
路由组件:Home、Search、Login（没有底部的Footer组件，带有二维码的）、Register（没有底部的Footer组件，带二维码的）

Header与Footer非路由组件完成

创建非路由组件（2个：Header、Footer）

非路由组件使用分为几步:
第一步：定义
第二步：引入
第三步：注册
第四步:使用

非路由组件的结构的搭建：
前台项目的结构与样式不需要自己写的，老师准备好了
辉洪老师静态页面：
结构 + 样式 +图片资源

项目采用的less样式,浏览器不识别less语法，需要一些loader进行处理，把less语法转换为CSS语法

1：安装less less-loader@5
切记less-loader安装5版本的，不要安装在最新版本，安装最新版本less-loader会报错，报的错误setOption函数未定义

2:需要在style标签的身上加上lang="less",不添加样式不生效

这里我在写的时候，明明引入了重置网页默认样式，但是没有效果？

解决方法就是： 把app.vue里的css删掉 

而Footer组件也是一样就是拆分就可以了

 完成 

完成路由组件的搭建

安装路由

npm install vue-router@3.5.3     如果@3的话可能安装的是3.6以上的版本，建议直接输入版本号

创建路由组件【一般放在views|pages文件夹】 

配置路由，配置完四个路由组件

 总结

路由组件与非路由组件的区别？

1.路由组件一般放置在pages/views文件夹，非路由组件一般放置componets文件夹中

2.路由组件一般需要在router文件夹中进行注册（使用的即为组件的名字），非路由组件在使用的时候，一般都是以标签的形式使用

3.注册完路由，不管路由路由组件，还是非路由组件身上都有$route,$router属性

$route:一般获取路由信息【路由，query，params等等】

$router:一般进行编程式导航进行路由跳转【push|replace】

路由的跳转有俩个形式：

声明式导航router-link,可以进行路由的跳转

编程时导航push|replace，可以进行路由的跳转

编程式导航：声明式导航能做到，编程时导航都能实现

但是编程式导航除了可以进行路由跳转，还可以做一些其他的业务逻辑

路由元信息的使用

就是使用Footer组件显示和隐藏

显示隐藏组件：v-if|v-show

Footer组件：在Home，Search显示Footer组件

Footer组件：在登录，注册时候隐藏

这种方法并不是最终的解决方案，如果有100个，那不就要写100个了吗。这肯定不行的

 配置的路由的时候，可以给路由添加路由元信息【meta】,路由需要配置对象，它的key不能瞎写，乱写

路由传递参数

第一种：字符串形式

这里我遇到了一个问题就是重定向的正则表达式*，把/searach覆盖了/home，因此无法实现$router.push

第二种：模板字符串

 但这俩种方式并不常用，对象的写法常用

先要到router.js里面起一个name

 路由传递参数相关面试题

1.路由传递参数（对象写法）path是否可以结合params参数一起使用？

答：路由跳转传参的时候，对象的写法可以是name,path形式，但是需要注意的是，path这种写法不能与params参数一起使用

2.如何指定params参数可传可不传？

如果路由要求传递params参数，但是你就不传递params参数，发现一件事情，URL会有问题的

如何指定params参数可以传递，或者不传递，在配置路由的时候，在占位的后面加上一个问号【parms可以传递或者不传递】

http://localhost:8080/#/?k=QWE

http://localhost:8080/#/search?k=QWE

3.params参数可以传递也可以不传递，但是如果传递的是空串，如何解决？

使用undefined解决：params参数可以传递，不传递（空的字符串）

 4.路由组件能不能传递props数据？

但是这个布尔值的写法只能传递一个params参数

对象写法，不常用

 函数写法