当前位置：首页 > news >正文

VueRouter的基本使用

news 2025/6/21 18:40:58

路由的基本使用

文章目录

路由的基本使用
- - 01-VueRouter
  - - - VueRouter的使用（ 5 + 2）
      - 综合代码
  - 拓展：组件存放问题

什么是路由呢？

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

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

01-VueRouter

作用：修改地址栏路径时，切换显示匹配的组件。
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>