Vue:路由的基本使用

1.目标

认识插件 VueRouter，掌握 VueRouter 的基本使用步骤

2.作用

修改地址栏路径时，切换显示匹配的组件

3.说明

Vue 官方的一个路由插件，是一个第三方包

4.官网

https://v3.router.vuejs.org/zh/

5.VueRouter的使用（5+2）

固定5个固定的步骤（不用死背，熟能生巧）

1. 下载 VueRouter 模块到当前工程，版本3.6.5

   yarn add vue-router@3.6.5
   npm i vue-router@3.5.2
   

2. main.js中引入VueRouter

   import VueRouter from 'vue-router'
   

3. 安装注册

   Vue.use(VueRouter)
   

4. 创建路由对象

   const router = new VueRouter()
   

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

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

当我们配置完以上5步之后 就可以看到浏览器地址栏中的路由 变成了 /#/的形式。表示项目的路由已经被Vue-Router管理了

6.代码示例

// 1. 导入所需模块
import Vue from 'vue'
import VueRouter from 'vue-router'
// 2. 调用 Vue.use() 函数，将 VueRouter 安装为 Vue 的插件
Vue.use(VueRouter)
// 3.配置路由规则
const routes = []
// 4. 创建路由的实例对象
const router = new VueRouter({
  // 路由的配置
  routes
})
// 5. 导出路由的实例对象
export default router

import router from '@/router' // 导入的是某个文件夹中的index文件，index可以不写
new Vue({
  router, // 挂载路由模块
  render: h => h(App)
}).$mount('#app')

7.三个核心步骤

1. 配置路由规则(router/index.js)

// 1. 导入所需模块
import Vue from 'vue'
import VueRouter from 'vue-router'
import DisCover from '@/views/DisCover.vue'
import MyMusic from '@/views/MyMusic.vue'
import Follow from '@/views/Follow.vue'

// 2. 调用 Vue.use() 函数，将 VueRouter 安装为 Vue 的插件
Vue.use(VueRouter)
// 3.配置路由规则
const routes = [
  {path:'/discover', component: DisCover},
  {path:'/mymusic', component: MyMusic},
  {path:'/follow', component: Follow},
]
// 4. 创建路由的实例对象
const router = new VueRouter({
  // 路由的配置
  routes
})
// 5. 导出路由的实例对象
export default router

import Vue from 'vue'
import App from './App.vue'
import router from '@/router' // 导入的是某个文件夹中的index文件，index可以不写
Vue.config.productionTip = false

new Vue({
  router, // 挂载路由模块
  render: h => h(App)
}).$mount('#app')

2. 设置路由出口(router-view/)(路径匹配的组件显示的位置)

<div class="top">
  <!-- 一会要在这里展示 发现音乐、我的音乐、关注 三个组件 -->
  <router-view></router-view>
</div>

3.设置超链接(<router-link to"/discover">)
App.vue

<div class="footer_wrap">
  <a href="#/find">发现音乐</a>
  <a href="#/my">我的音乐</a>
  <a href="#/friend">朋友</a>
</div>