电商平台项目----项目搭建

{
    "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会立即调用函数一次

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

电商平台 vue pc端

vuejs

javascript

ECMAScript