【Vue】路由的基本使用

vue-router插件作用 修改地址栏路径时，切换显示匹配的组件

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

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

VueRouter的使用（5+2）

一、固定5个固定的步骤

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

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

   Vue2对应的是3.6.5版本，口诀：2 3 3（Vue2 VueRouter3.x Vuex3.x），3 4 4（Vue3，VueRouter4.x，Vuex4.x）

   yarn add vue-router@3.6.5
   

2. main.js中引入VueRouter

   import VueRouter from 'vue-router'
   

3. 安装注册

   由于VueRouter是Vue的插件，所以在实际使用的时候，Vue相关的插件是需要安装注册之后再使用的，这个安装注册内部，它会帮你去进行一些组件的全局注册，说白了就是在进行插件的初始化

   Vue.use(VueRouter)
   

4. 创建路由对象

   const router = new VueRouter()
   

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

   虽然在路由对象里面没有配任何的规则，但是当你注入的那一刻开始，就代表着这个Vue实例已经被我们的VueRouter接管了！

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

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

---

二、代码示例

main.js

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


import VueRouter from 'vue-router'
Vue.use(VueRouter) // VueRouter插件初始化

const router = new VueRouter()

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

---

三、两个核心步骤

这两个步骤就是不同的项目配置起来不一样的

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

   平时组件我们会放在components目录，但是在路由中，推荐放到views（视图）目录

   如果需要往VueRouter中配规则，就需要往里面写个对象，并且对象中含有routes字段

   数组中包含的每一个对象就是一个规则，path中使用的是地址栏的绝对路径，是没有.的

   

2. 配置导航，配置路由出口(路径匹配的组件显示的位置)

   App.vue

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

组件名只有一个单词时会报错

解决办法：目的就是告诉Vue组件的名字是由多个单词组成的，以 Friend组件 为例

<template>
  <div>
    <p>我的朋友</p>
    <p>我的朋友</p>
    <p>我的朋友</p>
    <p>我的朋友</p>
  </div>
</template>

<script>
export default {
  name: 'MyFriend'
}
</script>

<style>

</style>

---

四、完整代码

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) // 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
}).$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>

<script>
export default {};
</script>

<style>
body {
  margin: 0;
  padding: 0;
}
.footer_wrap {
  position: relative;
  left: 0;
  top: 0;
  display: flex;
  width: 100%;
  text-align: center;
  background-color: #333;
  color: #ccc;
}
.footer_wrap a {
  flex: 1;
  text-decoration: none;
  padding: 20px 0;
  line-height: 20px;
  background-color: #333;
  color: #ccc;
  border: 1px solid black;
}
.footer_wrap a:hover {
  background-color: #555;
}
</style>