Vue2.0+Node.JS项目（知识点记录）

Vue2.0+Node.js项目实践与技巧总结

原创

已于 2022-09-13 11:11:18 修改 · 298 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2022-05-31 23:14:09 首次发布

本文详细记录了一个Vue2.0+Node.js项目的开发过程，涉及重定向、路由传参、编程式路由导航、接口管理、跨域、nprogress使用、Vuex、组件开发等多个关键知识点，包括三级导航联动、分页器实现、模拟数据、轮播图组件封装等实战经验。还探讨了Vuex的踩坑、路由跳转策略、数据管理和组件通信等重要环节。

项目实践难点总结-尚品汇

整个项目的三大关键点：分页；注册；支付

重定向问题

在路由配置文件中，应该配置重定向，使页面一开始跑起来就到首页

 {
   
   
            path:'*',
            redirect:"/home"

        }

路由传参（面试题）

路由跳转有两种方式：（1）router-link声明式导航（2）编程式导航：push/replace
路由传递参数（对象写法）path不可以结合paramas参数一起使用
指定params参数可传可不传
情况一：在路由配置文件中已经配置占位符，但路由跳转时不传递？
方法：在router配置文件中进行配置：占位符后面添加？

 {
   
   
           path:"/search/:keyword?",
           component:Search,
           meta:{
   
   show:true},
           name:"search"
       }

情况二：在路由配置文件中已经配置占位符，但路由跳转时传递的是空串？（跳转后页面显示有问题，无法显示组件路径）
方法：使用undefined

this.$router.push({
   
   
               name:'search',
               params:{
   
   
                   keyword:''||undefined
               },
                query:{
   
   
                    k:this.keyword
                }
           })