路由的基本使用

文章目录

路由的基本使用
- - 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 = false

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