路由基础配置（Vue2）

官网：Vue Router | Vue.js 的官方路由

网页层次：

如：

• 登录页  /login

• 首页架子 /

  • 首页 - 二级 /home

  • 分类页 - 二级 /category

  • 购物车 - 二级 /cart

  • 我的 - 二级 /user

• 搜索页 /search

• 搜索列表页 /searchlist

一级路由

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

  1. 先安装 `npm install vue-router`

  2. 导入，通过Vue.use()明确的安装路由功能

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

Vue.use(VueRouter)

3.  配置路由信息

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'
...
​
Vue.use(VueRouter)
​
const router = new VueRouter({
  routes: [
    {
      path: '/login',
      component: Login
    },
    {
      path: '/',
      component: Layout
    },
    {
      path: '/search',
      component: Search
    },
    {
      path: '/searchlist',
      component: SearchList
    }
      ...
  ]
})
​
export default router

一级路由出口：一级组件展示的位置 （位置相同，展示的组件不同）

App.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

二级路由

在VueRouter的参数中使用children配置：

1. router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Layout from '@/views/layout'
//...

import Home from '@/views/layout/home'
import Category from '@/views/layout/category'
import Cart from '@/views/layout/cart'
import User from '@/views/layout/user'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    {
      path: '/login',
      component: Login
    },
    {
      path: '/',
      component: Layout,
      redirect: '/home',  					/*重定向*/
      children: [
        {
          path: 'home',
          component: Home
        },
        {
          path: 'category',
          component: Category
        },
        {
          path: 'cart',
          component: Cart
        },
        {
          path: 'user',
          component: User
        }
      ]
    },
    {
      path: '/search',
      component: Search
    }
    ...
  ]
})

export default router

2. 设置路由出口

此处结合了vant组件库中的Tabber标签栏使用 to=""

<template>
  <div>
    <!-- 二级路由出口 -->
    <router-view></router-view>
    <van-tabbar route active-color="#ee0a24" inactive-color="#000">
      <van-tabbar-item to="/home" icon="wap-home-o">首页</van-tabbar-item>
      <van-tabbar-item to="/category" icon="apps-o">分类页</van-tabbar-item>
      <van-tabbar-item to="/cart" icon="shopping-cart-o">购物车</van-tabbar-item>
      <van-tabbar-item to="/user" icon="user-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>