项目介绍

其他配置

eslint 校验功能关闭

src文件简写方法，配置别名

项目路由分析（vue-router）

路由

路由组件

完成非路由组件 Header Footer 组件

步骤

配置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, () => { }, () => { })}}