VueRouter的基本使用

路由的基本使用

什么是路由呢？

在生活中的路由：设备和IP的映射关系

• 在Vue中：路径 和 组件 的 映射 关系。

---

01-VueRouter

1. 作用：修改地址栏路径时，切换显示匹配的组件。
2. VueRouter是Vue官方的一个路由插件，是一个第三方包。

---

VueRouter的使用 （ 5 + 2）

• 五个基础步骤

① 下载： 下载VueRouter 到当前工程，版本采用3或者4.

yarn add vue-touter@3.6.5

②引入

import VueRouter from 'vue-router'

③安装注册

Vue.use(VueRouter)  //VueRouter插件初始化

④创建路由对象

const router = new VueRouter()

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

 router  //简写 键是固定的，值可以自己创建

看到 #/ 就表示成功的注入了VueRouter

---

• 2个核心步骤

①创建需要的组件（views目录），配置路由规则

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-czBC18EO-1693238280996)(D:\桌面\images_md\Snipaste_2023-08-28_23-32-12.png)]

import Find from './views/Find.vue'
import My from './views/My.vue'
import Friend from './views/Friend'const router = new VueRouter({toutes: [{ path: '/find', component: Find}{ path: '/my' ,component: My},{ path: '/friend', component: Friend},
]
})

---

②配置导航，配置路由出口（路径匹配的组件显示的位置）

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

---

综合代码

import Vue from 'vue'
import App from './App.vue'// 路由的使用步骤：5 + 2
// 1. 下载 v3.6.5
// 2. 引入
// 3. 安装注册 Vue.use
// 4. 创建路由对象
// 5. 注入到new Vue中，建立关联// 2个核心步骤：
// 1. 创建组件，配路由规则
// 2. 配置导航，配置路由出口，同时设置路径匹配组件的显示位置import VueRouter from 'vue-router'
import Find from './views/Find'
import My from './views/My'
import Friend from './views/Friend'
Vue.use(VueRouter)  //VueRouter插件初始化const router = new VueRouter({// 配置路由规则routes: [{ path: '/find', component: Find},{ path: '/my', component: My},{ path: '/friend', component: Friend},]
})Vue.config.productionTip = falsenew Vue({render: h => h(App),router  //简写 键是固定的，值可以自己创建
}).$mount('#app')

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

---

---

拓展：组件存放问题

为什么将路由相关的文件放在 views目录呢？

这就得牵扯到我们的组件分类了

组件分类：.vue文件

1. 页面组件： 配合路由使用的组件放在 views文件夹中
2. 复用组件：展示数据或者使用率复用高的放在components文件夹中

分类目的：就是方便维护