VueRouter路由的使用(5+2)

VueRouter/路由简而言之就是路径改变从而对应组件跟着切换的效果，只是切换组件并不是重新渲染整个页面

5个基础步骤(固定)

1.下载：下载 VueRouter 模块到当前工程版本我这个人推荐 3.6.5

yarn add vue-router@3.6.5

2.引用

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 
  router   // 简写
}).$mount('#app')

2个核心步骤

1. 建组件(一般都创建一个views目录)，配规则

const router = new VueRouter({    // 创建路由对象
  // routes 路由规则们
  // route  一条路由规则 { path: 路径, component: 组件 }
  routes: [  // 固定样式 route代表规则
    { path: '/find', component: Find },
    { path: '/my', component: My },
    { path: '/friend', component: Friend },
  ]
})

1.1 记得引用 views目录中的几个组件

1.3 在这里配置完结束后可能会提示以下内容，别怕，这是vue在提醒我们尽可能的起名字长一点增强语义化，在组件中添加 name: 'FindMusic' 就解决了

2. 准备导航链接，配置路由出口(匹配的组件展示的位置)

2.1 在导航中的路径要和规则中的路径名保持一致格式如下：

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

2.2 路由出口 → 匹配的组件所展示的位置它在哪，代表你写的组件会在哪里显示出来

<router-view>  </router-view>

概括：

7个步骤：1.下载包 2.引入包 3.Vue.use 安装注册 4.创建路由对象 5.注册Vue实例 6.创建组件，配置规则，引用 (路径组件的匹配关系) 7.配导航，配置路由出口 router-view(组件的展示位置)

标签：前端笔记

温馨提示：本文最后更新于2024年3月27日 20:48，若内容或图片失效，请在下方留言或联系博主。