52 - 综合案例 - 智慧商城-04 - 路由设计配置

一. 配置一级页面

目标: 分析项目页面，设计路由，配置一级路由

但凡是单个页面，独立展示的，都是一级路由

1. 创建项目页面目录

2. 一级页面组件index.vue

<!--所有的一级页面先只写个显示-->
<template>
    <div>我是login</div>
</template>
<script>
export default {
  name: 'LoginIndex'
}
</script>
<style>
</style>

3. router / index.js 配置路由  

import Vue from 'vue'
import VueRouter from 'vue-router'

// import Login from '@/views/login/index.vue'
import Login from '@/views/login' // 直接导入login文件,会自动找到index.vue
import Layout from '@/views/layout'
import Search from '@/views/search'
import SearchList from '@/views/search/list'
import ProDetail from '@/views/prodetail'
import Pay from '@/views/pay'
import MyOrder from '@/views/myorder'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    { path: '/login', component: Login },
    { path: '/', component: Layout },
    { path: '/search', component: Search },
    { path: '/searchlist', component: SearchList },
    // 动态路由传参,确认将来是哪个商品,路由参数中携带id
    { path: '/prodetail/:id', component: ProDetail },
    { path: '/pay', component: Pay },
    { path: '/myorder', component: MyOrder }
  ]
})

export default router

4. 代码示例

二. 配置二级页面

1. tabbar 标签页

目标:阅读vant组件库文档，实现底部导航 tabbar

        (1). vant-ui.js 按需引入

# utils/vant-ui.js
import {Tabbar,TabbarItem} from 'vant'
Vue.use(Tabbar)
Vue.use(TabbarItem)

        (2). layout / index.vue 粘贴官方代码测试

# views/layout/index.vue 

<van-tabbar>
  <van-tabbar-item icon="home-o">标签</van-tabbar-item>
  <van-tabbar-item icon="search">标签</van-tabbar-item>
  <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
  <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
</van-tabbar>

        (3). 修改文字,图标,颜色

<van-tabbar active-color="#ee0a24" inactive-color="#000">
  <van-tabbar-item icon="wap-home-o">首页</van-tabbar-item>
  <van-tabbar-item icon="apps-o">分类页</van-tabbar-item>
  <van-tabbar-item icon="shopping-cart-o">购物车</van-tabbar-item>
  <van-tabbar-item icon="user-o">我的</van-tabbar-item>
</van-tabbar>

        (4). 代码示例

2.  二级路由设计配置

目标:基于底部导航，完成二级路由配置

                

        (1). 定义二级页面组件

                ①. views / layout 文件夹下新建 .vue文件

                ​​​​​​​

               ②. 填充组件内容

<template>
    <div>Crat</div>
</template>

<script>
export default {
  name: 'CartIndex'
}
</script>

        (2). 配置路由规则

{
      path: '/',
      component: Layout,
      redirect: '/home', // 重定向
      // 二级路由
      children: [
        { path: '/home', component: Home },
        { path: '/category', component: Caregory },
        { path: '/cart', component: Cart },
        { path: '/user', component: User }

      ]
    },

        (3). 配置导航连接

 <van-tabbar route>
        <van-tabbar-item to="/home"...>首页</van-tabbar-item>
        ...
    </van-tabbar>

        (4). 路由出口

 <div>
      <router-view></router-view>
      ...(导航部分)
    </div>

        (5). 代码示例