## 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>
