VueRouter(切换不同的路径使用对应的组件)

1.介绍

2. 使用步骤（5+2）

(1).下载VueRouter模板,注意版本号

  vue2使用 vuerouter3.x   和vue3.x(233)

  vue3使用 vuerouter4.x   和vue4.x(344)

  在终端输入，下载VueRouter

npm install vue-router@3.5.6 --save

下面的步骤都是在main.js文件中进行 

(2).引入VueSouter

import VueRouter from 'vue-router'

(3).安装注册

Vue.use(VueRouter)

(4).创建路由对象

const router = new VueRouter()

(5).将路由对象注入到new Vue实例中，建立联系

第三行可以简写是因为名字相同，router:'对象名‘

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

(6).创建需要的组件（views目录），配置路由规则

(7).配置导航，'#/路径'

 main.js

import Vue from 'vue'
import App from './App.vue'

// 路由的使用步骤 5 + 2
// 5个基础步骤
// 1. 下载 v3.6.5
// 2. 引入
// 3. 安装注册 Vue.use(Vue插件)
// 4. 创建路由对象
// 5. 注入到new Vue中，建立关联

// 2个核心步骤
// 1. 建组件(views目录)，配规则
// 2. 准备导航链接，配置路由出口(匹配的组件展示的位置) 
import Find from './views/Find'
import My from './views/My'
import Friend from './views/Friend'
import VueRouter from 'vue-router' 
Vue.use(VueRouter) // 3.安装注册，VueRouter插件初始化

const router = new VueRouter({
  // routes 路由规则们
  // route  一条路由规则 { path: 路径, component: 组件 }
  routes: [
    { path: '/find', component: Find },
    { path: '/my', component: My },
    { path: '/friend', component: Friend },
  ]
})

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router
  //5. 注入到new Vue中，建立关联
  // 第21行如果是r, 则第35行是  router : r
}).$mount('#app')

app.vue

<template>
  <div>
    <div class="footer_wrap">
      <a href="#/find">发现音乐</a>
      <a href="#/my">我的音乐</a>
      <a href="#/friend">朋友</a>
    </div>
    <div class="top">
      <!-- 路由出口 → 匹配的组件所展示的位置 -->
      <router-view></router-view>
    </div>
  </div>
</template>

3.views和components文件夹

views用来存放配合路由使用的组件

components用来存放复用的组件