Vue2电商项目平台(一) 项目初始化及路由搭建

一、项目初始化及路由搭建

开发项目步骤：

• 书写静态页面
• 拆分组件
• 获取服务器的数据动态展示
• 完成相应的动态业务逻辑

1. 拆分组件

观察几个页面发现：几个页面的Header相同，Footer只在两个页面显示。所以：

• Home Search Login Register组件是路由组件
• Header Footer是非路由组件

创建组件时注意：

注意1：找准 组件结构HTML+ 样式CSS + 资源(图片)
**注意2：**本项目采用less样式，需要安装less，npm i less less-loader@6
注意3： 引入清除默认样式，将默认样式放在public文件夹中，在index.html里引入。

2. 搭建非路由组件

非路由组件写在components文件夹中。
搭建组件的步骤: 创建组件、 引入组件、 注册组件、 使用组件

（TypeNav是随着后面功能的实现提取出的一个全局组件，这里只搭建前边分析出来的那两个非路由组件）

2. 搭建路由组件

路由组件有4个,Home,Search,Login,Register

(1)、配置路由器

components文件夹: 放置全局组件或非路由组件
pages或views文件夹：放置路由组件
router文件夹：创建路由器、配置路由

// main.js中 引入路由器
import router from '@/router'
new Vue({
  // KV一致时省略V[router小写的r]
  router,
  render: h => h(App),
}).$mount('#app')

路由重定向

router/index.js文件:

(2)、使用路由组件

<router-view>指定展示位置;登录、搜索、注册这几个跳转页面的a标签都换成<router-link>

(3)、路由组件与非路由组件的区别

1、路由组件一般放置在pages|views文件夹，非路由组件一般放置在components文件夹中
2、路由组件一般需要在router文件夹中的index.js文件中配置路由规则。非路由组件在使用的时候，一般都是以标签的形式使用
3、注册完路由，不管是路由组件还是非路由组件，身上都有 $route,$router属性。
非路由组件当中的$route就是当前显示的路由组件的一些信息。
$route：一般获取路由信息(path，query，params等等)
$router：一般进行编程式导航进行路由跳转(push | replace)
（这一点是看其他博主的总结,原文链接：https://blog.csdn.net/weixin_42044763/article/details/126719094）

3. Footer组件显示与隐藏—路由元信息

Footer组件: 在Home、Search页面显示
Footer组件：在登录、注册的时候是隐藏的
具体操作：用v-if或v-show

方式一：根据组件身上的$route获取当前路由的信息，通过路由信息判断Footer是显示还是隐藏

如果很多页面都显示Footer，这种方式会写很长一串。

方式二：配置路由时，利用路由元信息meta添加属性。

4. 路由面试题

回顾路由的基本内容，看这篇博客：Vue(十三) 路由
1、路由跳转的两种方式
声明式导航：<router-link>
编程式导航：利用的时组件实例的$router.push|replace方法

2、路由传参有几种方式

参数有两类：
params参数：属于路径中的一部分，配置路由时，需要占位
query参数：不属于路径的一部分，无需占位，(/home?k=v& k1 = v1)

传参方式：

• 传参方式一：纯字符串拼接
• 传参方式二：模板字符串

// ${}是param参数，?detail=..是query参数
this.$router.push(`/search/${this.keyWord}?detail=${this.keyWord.toUpperCase()}`)

• 传参方式三：对象

this.$router.push({
  name: 'search',
  params: {
    keyWord: this.keyWord,
  },
  query: {
    detail: this.keyWord.toUpperCase()
  }
})

2、路由传递参数(对象写法)，path是否可以结合params一起使用？
对象写法可以通过配置name或者path来指定路径，但是path不能和params结合使用

3、如何指定params参数可传可不传
配置路由的时候，使用了占位符，如果此时不传递params参数,路径会出现问题

比如：

// index.js 里配置这样一个路由
    {
      name: 'search',
      path: '/search/:keyWord',
      component: Search,
      meta: { isShow: true }
    }
// 组件里采用对象方式传参，只传query参数时：
{ name: 'search',
  query: {
    detail: this.keyWord.toUpperCase()
  }
}

路径变为：http://localhost:8080/#/?detail=SHOES（跳转到search，路径至少应该有个search）

解决方法：在占位符后边加?

{
    name: 'search',
    path: '/search/:keyWord?',
    component: Search,
    meta: { isShow: true }
}

此时路径为：http://localhost:8080/#/search?detail=SHOES

4、已指定params参数可传可不传，若是空串该如何处理
比如对象方式传参：

this.$router.push({
    name: 'search',
    params: {
        keyWord: ''
    },
    query: {
        detail: this.keyWord.toUpperCase()
    }
})

此时路径也会出现问题：http://localhost:8080/#/?detail=SHOES

解决方法：加上undefined

params: {
        keyWord: ''|| undefined
    }

(最后还有一节解决一个bug的知识点，这里先不记录了，遇到再回来记录)

5. Header组件路由跳转

结合上边提到的路由知识点。Header组件里的搜索按钮，采用编程式路由导航。当点击搜索时，由Home模块跳转到Search模块。

搜索的回调函数为

  methods: {
    goSearch () {
      this.$router.push({
        name: 'search',
        params: {
          keyWord: this.keyWord || undefined
        }
      })
    }
  },