使用vue构建商城界面（二）--简单路由处理

前置条件

使用vue构建商城界面（一）
先构建基于vant的基础移动页面

一、路由说明

• 后端路由 所有的超链接都是url地址，所有url都对应服务器上对应的资源
• 前端路由 通过url的hash（#）来实现不同页面的切换
  vue页面是单页面，明显的前端路由不用多说，相当于所有的二级多级页面只是在原有的页面上进行渲染重新加载。

二、路由构建

1. 安装vue-router

npm install vue-router

官方文档
几个注意点

• 路由出口写在html中，使用固定的标签 <router-view></router-view>
• 编写JS文件
  • 导入Vue和VueRouter，要调用 Vue.use(VueRouter)
  • 定义 (路由) 组件，就是编写的vue代码文件
  • 定义路由，通过new VueRouter创建路由事例
  • 在new Vue中将定义的路由事例导入进去
• 通过标签<router-link></router-link>进行路由跳转，可以通过this.$router访问路由

PS：vant中router-link会渲染成a标签，在chrome浏览器中会被 -webkit-any-link 属性影响而改变原色，所以需要添加全局的css改变默认属性
a, a:visited, a:hover, a:active {
text-decoration: none;
color: inherit;
}

三、页面构建

基于上一篇已经构建的首页，现在需要构建的页面是剩下的分类、购物车以及我的页面。

分类界面
购物车

这两个页面主要用了几个不一样的控件

1. 导航栏
   通过fixed属性可以让导航贴在页面顶上
2. 侧边导航
   侧边导航的主体内容还没有研究出来，这里应该再加载一个列表
3. 标签页面
   vant的标签页面比较简单，应该不太适合用，后面可以修改
4. 提交订单栏

ps：购物车的商品选择需要重新构建，可以自己编写页面组件进行构建