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

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

前端贾公子

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
电商平台项目----项目搭建

目录项目介绍其他配置eslint 校验功能关闭src文件简写方法，配置别名项目路由分析（vue-router）路由路由组件完成非路由组件 Header Footer 组件步骤配置less路由组件的搭建-路由组件与非路由组件的区别$router与$route路由的跳转组件的显示与隐藏路由传参第一种第二种模板字符串第三种对象需要路由配置name（命名路由）接收面试题路由传递参数（对象写法）path是否可以结合par
复制链接

扫一扫