## 1.什么Vue的路由
路由主要用来Vue视图之间的切换
## 2.一级路由
2.1怎么使用Vue的一级路由
1.定义组件 ：目的是用来切换显示
2.定义一个路由文件
import Vue from 'vue'
import Router from 'vue-router'
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
redirect: '/recommend'
},
{
path: '/m-header',
name: 'm-header',
component: MHeader
}
]
})
## 3如何定义路由
根据工作经验，我们一般会抽出一个组件作为路由文件
<template>
<div class="tab">
<router-link tag="div" class="tab-item" to="/recommend">
<span class="tab-link">推荐</span>
</router-link>
<router-link tag="div" class="tab-item" to="/singer">
<span class="tab-link">歌手</span>
</router-link>
<router-link tag="div" class="tab-item" to="/rank">
<span class="tab-link">排行
</span>
</router-link>
<router-link tag="div" class="tab-item" to="/search">
<span class="tab-link">搜索</span>
</router-link>
</div>
</template>
## 4.在主文件中引入该路由文件
1.App.vue中引入该路由文件
2.用一个div进行存在路由加载过来的组件（显示）
<keep-alive>
<router-view></router-view>
</keep-alive>
## 二级路由值多级路由如何使用
### 1. 什么是二级路由：
在一级路由下面再进行一次路由的跳转称为二级路由
### 2. 定义路由
export default new Router({
routes: [ {
path: '/singer',
component: Singer,
children: [
{
path: ':id',
component: SingerDetail
} ]
}
]
})
### 3. 如何使用二级路由
this.$router.push({
path: `/singer/${singer.id}`
})
### 4. 哪里使用二级路由在vue文件中引入
<router-view></router-view>
