目录
项目介绍
其他配置
eslint 校验功能关闭
src文件简写方法，配置别名
项目路由分析（vue-router）
路由
路由组件
步骤
配置less
路由组件的搭建-
路由组件与非路由组件的区别
$router与$route
路由的跳转
组件的显示与隐藏
路由传参
第一种
第二种 模板字符串
第三种 对象 需要路由配置name（命名路由）
接收
面试题
路由传递参数（对象写法）path是否可以结合params一起使用？
如何指定params可传可不传？
params传递的是空串如何解决
路由组件可以传递props数据？
报错
重写push与replace方法
cla||apply区别
项目介绍
vue cli 脚手架初始化项目
node + webpack+ 淘宝镜像
- node_modules:项目依赖文件
- public：存放静态资源（图片）webpack打包时会原封不动的放到dist目录
- src源代码
- assets 放置静态资源 webpack打包时，会把静态资源当做一个模块打包到js里
- components:非路由组件
- App.vue 根组件 (.vue)
- main 入口文件(整个程序最先执行的文件)
- babel.config 配置文件(babel相关)
- package.json:记录项目依赖
其他配置
eslint 校验功能关闭
声明变量没有使用 eslint 校验工具报错
在根目录下创建一个 vue.config,js { lintOnSave: false }
src文件简写方法，配置别名
创建jsconfig.json文件 【@】代表src文件夹，不可以在"node_modules", "dist"使用
{"compilerOptions": {"baseUrl": "./","paths": {"@/*": ["src/*"]}},"exclude": ["node_modules","dist"]
}项目路由分析（vue-router）
路由
前端所谓的路由kv键值对 key：URL(地址栏中的路径) value：相对应的组件
路由组件
Home首页路由组件 Search搜索组件 login登录组件 Refister注册组件
非路由组件：
Header(首页，搜索页)
Footer(首页，搜索页) 登录页，注册没有
完成非路由组件 Header Footer 组件
步骤
书写静态页面 拆分组件 获取服务器数据动态展示 完成交互逻辑
使用组件 [非路由组件]：创建或者定义 引入 注册 使用
配置less
浏览器不识别less,需要通过 less less-loader 配置版本5 组件中加 style lang="less"
路由组件的搭建-
vue-router配置路由：放置在router文件中
main的js挂载 //注册路由：kv一致省略v（小写） //注册路由信息：组件身上拥有$router与$route
app.vuez主页面放router-view 路由容器
路由组件与非路由组件的区别
components:放置非路由组件 pages【views】:放置路由组件
路由组件需要在router文件中注册（使用的是组件的名字）
重定向：在项目跑起来之后，立马定项到首页 redirect
$router与$route
route:获取路由信息[路径 ,query,params 参数]
router（路由器）：编程式导航跳转【push/replace】
push压栈有记录 replace替换
路由的跳转
声明式导航 router-link 必须有to属性
编程时导航 router.push，replace
声明式能做的编程式都可以编程式,可以做业务逻辑
组件的显示与隐藏
Footer： Home Search显示 登录注册时不显示
使用v-show 控制display：none 减少重排和重绘
可以使用route的路由信息 $route.path == '/Home'（不推荐）
可以使用路由元信息:配置路由时使用meta v-show="$route.meta.show"
路由传参
声明式导航 router-link 必须有to属性
编程时导航 router.push，replace
params：参数属于路径的一部分（配置路由时需要占位）path: '/Search/:keyWord',
query：类似以ajax中的queryString/home?k=v&k=v(不需要占位)
第一种
this.$router.push("/Search/" + this.keyWord + "?k=" + this.keyWord.toUpperCase())
第二种 模板字符串
this.$router.push(`/Search/${this.keyWord}?k=${this.keyWord.toUpperCase()}`);
第三种 对象 需要路由配置name（命名路由）
this.$router.push({name: "Search",params: this.keyWord,query: { k: this.keyWord.toUpperCase() },});接收
<h1>params路径参数—-{{ this.$route.params.keyWord }}</h1>
<h1>query参数—–{{ this.$route.query.k }}</h1>
面试题
路由传递参数（对象写法）path是否可以结合params一起使用？
对象的的写法 不可以结合path一起使用 要使用name
如何指定params可传可不传？
配置路由的的时候占位了，但是路由跳转的时候不传递路径会出问题
在配置路由的加上一个问号代表可有可无path: '/Search/:keyWord?',
params传递的是空串如何解决
使用undefined解决：params: this.keyWord||undefined
路由组件可以传递props数据？
三种写法
路由配置props：true 只可以传递params
对象写法prors{a：1,b:2}
函数写法 可以把params，query参数通过props组件传递给路由组件
报错
Uncaught TypeError: (0 , vue__WEBPACK_IMPORTED_MODULE_0__.defineComponent) is not a function
卸载当前vue-router版本
使用低版本 npm install vue-router@3
重写push与replace方法
编程式路由导航跳转(参数不变) 多次执行会抛出 navigation的警告 声明式导航没有此类问题，内部已经处理
"vue-router": "^3.5.3" 引入了promise
必须传入成功或者失败的回调可以解决 传入一个空函数结果为undefined promise为成功
this.$router.push({name: "Search",params: this.keyWord,query: { k: this.keyWord.toUpperCase() },},() => {},() => {});从根本解决问题、
this：组件实例
this.$router属性：是一个对象属性值是vueRouter的实例(注册路由时，给组件实例添加的$router $routets属性)、let $router=new vueRouter
push 是 vueRouter原型上的方法 push方法的上下文应该为vueRouter类的一个实例，也就是 $router
//先把VueRouter的push方法保存一份
let orginPush = VueRouter.prototype.push;
// 重写push、replace
// 第一个参数告诉push往那跳（传递的参数）
VueRouter.prototype.push = function (location, reslove, reject) {//this为VueRouter的实例if (reslove && reject) {// orginPush() this为window 应该保证为VueRouter的实例orginPush.call(this, location, reslove, reject)} else {orginPush.call(this, location, () => { }, () => { })}
}
let orginReplace = VueRouter.prototype.replace;
VueRouter.prototype.replace = function (location, reslove, reject) {//this为VueRouter的实例if (reslove && reject) {orginReplace.call(this, location, reslove, reject)} else {orginReplace.call(this, location, () => { }, () => { })}}
cla||apply区别
// 都可以调用函数一次，可以修改this指向
// 传参格式不一样 call参数用逗号隔开 apply为数组
// bind会立即调用函数一次