官网：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>