路由安装及使用

路由的使用（5+2） 

路由基本步骤 

在main文件下完成以下步骤

// 1. 安装vue-router 终端输入：
npm install vue - router@3.6.5

// 2. 引入
import VueRouter from 'vue-router'

// 3. 安装注册 Vue.use(Vue插件)
Vue.use(VueRouter)  //VueRouter插件的初始化

// 4. 创建路由对象
const router = new VueRouter() //router不要乱写

// 5. 注入到new Vue中，建立关联
new Vue({
  render: h => h(App),
  router    //只要添加这
}).$mount('#app')

路由核心步骤

1. 创建需要的组件（src/views目录）

几个页面之间的切换，就创建几个页面组件

// 建立组件时，使用大驼峰写法,或者name一个新的名字
export default {
    name: "FriendMusic",
};

2. 配置路由规则 main.js

// 引入路由模块，例如下：
import Find from './views/Find.vue';
import Friend from './views/Friend.vue';
import Friend from './views/Friend.vue';

const router = new VueRouter({
  routes: [
    // {path: '地址栏路径',component:组件名}, 例如下：
    { path: '/find', component: Find },
    { path: '/my', component: My },
    { path: '/friend', component: Friend },
  ]
})

 3.配置导航，配置路由出口（路径匹配组件显示的位置） App.vue

<template>
  <div>
    <div class="fb">
    <a href="#/find">发现音乐</a>
    <a href="#/my">我的音乐</a>
    <a href="#/friend">朋友</a>
  </div>
  <div>
    <!-- 路由出口 => 展示对应的页面组件 -->
    <router-view></router-view>
  </div>
  </div>
</template>

流程图