【Vue】 路由配置 - 一级路由

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

路由设计：

• 登录页
• 首页架子
  • 首页 - 二级
  • 分类页 - 二级
  • 购物车 - 二级
  • 我的 - 二级
• 搜索页
• 搜索列表页
• 商品详情页
• 结算支付页
• 我的订单页

由于每一个一级路由他会封装一些属于它自己模块的组件，所以推荐新建成一个文件夹

然后每个文件夹中新建一个核心文件：index.vue

router/index.js 配置一级路由，新建对应的页面文件

import Vue from 'vue'
import VueRouter from 'vue-router'
import Layout from '@/views/layout'
import Search from '@/views/search'
import SearchList from '@/views/search/list'
import ProDetail from '@/views/prodetail'
// 如果我们加载的是文件夹下的index根文件，只需要加载到文件夹就可以了，它会自动帮你去找到
import Login from '@/views/login'
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