一、项目初始化
1.脚手架目录介绍
node_modules文件夹:放置项目的依赖
public文件夹:一般放置的是静态资源(图片),需要注意:放在public文件夹中的静态资源,webpack进行打包的时候,会原封不动打包到dist文件夹中,不会当做一个模块打包到 JS 里面
src文件夹(程序员源代码文件夹):
—assets文件夹:一般放置的是静态资源(一般放置多个组件公用的的静态资源),需要注意:放置在assets文件夹里面的资源,webpack打包的时候,会把静态资源当做一个模块,打包到JS文件里面
—components文件夹:一般放置的是非路由组件(全局组件)
—App.vue :唯一的根组件,Vue当中的组件都是(.vue)
—main.js:程序的入口文件,也是整个程序当中最先执行的文件
babel.config.js:配置文件,与babel相关
package.json文件:记录着项目信息,叫什么…有哪些依赖…项目怎么运行…
package-lock.json:缓存性文件
README.md:说明性文件
2.项目的其他配置
(1)项目运行起来的时候,让浏览器自动打开。
找到package.json文件,找到"scripts"进行如下修改:
更改为→
(2)eslint校验功能关闭
在根目录下,创建一个vue.config.js文件,添加以下代码:
const {defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ transpileDependencies: true, //关闭eslint语法校验 lintOnSave: false })
(3) src文件简写方法。
在开发中经常会写../这类代码,很不方便,可以给src起一个别名,后面编写代码时会方便很多。
//jsconfig.json 配置别名@提示 【@代表的是src文件夹,这样将来文件过多,找的时候方便很多】 { "compilerOptions":{ "baseUrl":"./", "paths":{ "@/*":["src/*"] } }, "exclude":["node_modules","dist"] }
二、项目的路由分析及搭建
1.项目的路由分析
vue-router 前端所谓的路由:key-Value键值对
key:URL (地址栏中的路径)
value:相应的路由组件
注意:项目的上中下结构
分析:
- 在点击搜索后,顶部的header和底部的footer都没有改变,说明header和footer两个组件为非路由组件。而中间的Home和Search组件发生了变化,所以这两个组件为路由组件。
- 点击登录和注册按钮后,顶部Header没有发生变化,但中间Home和底部Footer发生改变。
总结:
- 路由组件:Home首页路由组件、Search路由组件
- 非路由组件:Header组件、Footer组件【在首页Home和搜索页Search存在,在登录页Login和注册组件 不存在】
2.开发项目时的基本流程
(1)书写静态页面(HTML+CSS)
(2)拆分组件
(3)获取服务器的数据动态展示
(4)完成相应的动态业务逻辑
3.非路由组件搭建及注意事项
基本步骤:
- 创建组件
- import引入组件
- 在components中注册组件
1.创建组件的时候,要提前准备好 组件的结构 + 组件的样式 + 图片资源。
2.项目采用less样式,浏览器不识别less样式,需要通过less、less-loader进行处理。
3.如果想让组件识别less,需要在style标签上加上lang="less"。
4.路由组件的搭建及注意事项
vue-router 在2.1分析的时候,路由组件应该有四个:Home、Search、Login、Register
- components文件夹:经常放置非路由组件
- pages|views文件夹:经常放置路由组件
总结:
路由组件与非路由组件的区别?
- 路由组件一般放置在 pages | views 文件夹中,非路由组件一般放置在 components 文件夹中。
- 路由组件一般需要在 router 文件夹中进行注册,非路由组件在使用的时候,一般都是以标签的形式使用。
- 注册完路由,不管是路由组件还是非路由组件,他们身上都有 $route 和 $router 属性
- $route:一般获取路由信息【路径、query、params等】
- $router:一般进行编程式导航进行路由跳转【push | replace】
重定向
路由的跳转?
路由的跳转有两种形式:
- 声明式导航 router-link,可以进行路由的跳转
- 编程式导航 push | replace ,可以进行路由跳转
注意:声明式导航能做的,编程式导航都能做 。编程式导航除了可以进行路由跳转,还可以进行其它的业务逻辑。
5.Footer组件的显示与隐藏
组件的显示与隐藏: v-if | v-show
Footer 组件:在Home、 Search 下显示Footer组件;在Login、 Register 下隐藏。
- 我们可以根据组件身上的$route 来获取当前路由的信息。
//当路径是home或者search时为True,显示Footer组件;反之为False,隐藏Footer
<Footer v-show="$route.path=='/home'||$route.path=='/search'"></Footer>
- 配置路由的时候,可以在router文件夹下面的index.js中给路由添加路由元信息【meta】。
//配置路由
routes: [
{
path: '/home',
component: Home,
//meta 为数据的元信息
meta:{show:true}
},
{
path: '/login',
component: Login
},
{
path: '/register',
component: Register
},
{
path: '/Search',
component: Search,
//meta 为数据的元信息
meta: { show: true }
},
]
回到App组件中:
在App.vue 中通过元信息来控制Footer组件的显示与隐藏
<Footer v-show="$route.meta.show"></Footer>
注意:路由的配置对象是唯一的,它的key不能随便写。
四、路由传参
1.路由跳转的两种方式:声明式导航 和 编程式导航
- 声明式导航:使用 vue-router 标签,标签中务必要有to属性。
- 编程式导航:通过$route.push | $route.replace 的方法来实现路由的跳转。
2.路由传参,参数的几种写法:params参数 和 query参数
params参数:属于路径当中的一部分,需要注意:在配置路由的时候,需要占位。
query参数:不属于路径当中的一部分。类似于ajax中的queryString /home?k=v&kv= ,不需要占位
3.路由传参面试题
路由传递参数(对象写法)path是否可以结合params参数一起使用?
答:路由跳转传参的时候,对象的写法可以是name、path形式,但是path写法不能与params参数一起使用。
如何指定params参数可传可不传?
答:配置路由的时候,进行了占位操作,但在路由跳转的时候不传递params参数,此时url路径会出现问题。如何指定?在配置路由的时候,在占位的后面加上一个问号,则表示params参数可传可不传。
params参数可传可不传,但是如果传递的是空串,如何解决?
答:params可传可不传,为了防止传递的是空串,需要使用undefined解决。
路由组件能不能传递props?
答:可以,有三种写法。
1.布尔值写法:只能传递params参数
在路由配置项中配置props属性值为true,在路由组件中使用props接受。
2.对象写法:额外给路由组件传递一些参数
在路由配置项中配置props属性值为对象形式,在路由组件中使用props接受。
3.函数写法:可传递params参数、query参数,通过props传递给路由组件
解决bug
Bug:编程式路由跳转到当前路由(参数不变),多次执行会抛出NavigationDuplicated的警告错误
路由跳转的形式有两种:声明式导航和编程式导航
声明式导航没有这类问题,因为vue-router在底层处理好了,不会出现这个警告
1.为什么编程式导航在进行路由跳转的时候,会出现这种警告错误?
答:
1.通过给push方法传递相应的成功、失败的回调函数,捕获到当前错误,成功解决出现警告的问题。这种写法治标不治本,在其它别的路由组件中如果用到push | replace 时,编程式导航还是会出现这个错误。
2.重写push | replace 来解决。
// 重写push方法解决多次跳转路由的报错问题
// 1.把VueRouter原型对象的push备份
let originPush = VueRouter.prototype.push
// 2.重写push,告诉原来的push方法 要往哪里传递参数
VueRouter.prototype.push=function(location,resolve,reject){
if(resolve&&reject){
originPush.call(this,location,resolve,reject)
}else{
originPush.call(this,()=>{},()=>{})
}
}
// 重写replace方法解决多次跳转路由的报错问题
// 1.把VueRouter原型对象的replace备份
let originReplace = VueRouter.prototype.replace
// 2.重写push,告诉原来的push方法 要往哪里传递参数
VueRouter.prototype.replace = function (location, resolve, reject) {
if (resolve&&reject) {
originReplace.call(this, location, resolve, reject)
} else {
originReplace.call(this, () => { }, () => { })
}
}