13-Vue基础之路由

个人名片：
😊作者简介：一名大二在校生
🤡 个人主页：坠入暮云间x
🐼座右铭：懒惰受到的惩罚不仅仅是自己的失败，还有别人的成功。
🎅**学习目标: 坚持每一次的学习打卡

文章目录

一、什么是路由？
- 官网
- VueRouter安装(5+2)
- - 1.下载VueRouter3.6.5版本
  - 2.引入
  - 3.安装注册
  - 4.创建路由对象
  - 5.注入，将路由对象注入到new Vue实例中，建立关联
  - 6.核心步骤
  - 路由组件的分类
二、声明式/编程式导航
- 1.导航链接
- - 1.router-link-active（模糊匹配）
  - 2.router-link-exact-active（精确匹配）
- 如何查询参数传参？
- 编程式导航，如何跳转传参？
三、动态路由传参
- 查询参数传参 VS 动态路由传参
总结

一、什么是路由？

路由是一种映射关系
vue中的路由是路径和组件的映射关系
通过路由就可以知道把不同的路径，应该匹配渲染那个组件
在这里插入图片描述
生活中的路由：设备和ip的映射关系

官网

vue官网

VueRouter安装(5+2)

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

1.下载VueRouter3.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
}).$mount('#app')

6.核心步骤

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

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 },
  ]
})

2.配置导航，配置路由出口
在这里插入图片描述在上面的示例中，<router-link>用于跳转到指定路由，<router-view>用于显示对应路由的组件。

路由组件的分类

在vue中我们常将vue文件分为两类

页面组件（配置路由规则时需要使用的组件
复用组件（可以重复使用的组件）

将vue文件分开目的是为了更方便维护代码，方便后续修改和完善

二、声明式/编程式导航

1.导航链接

vue-router 提供了一个全局组件 router-link (取代 a 标签)

能跳转，配置 to 属性指定路径(必须) 。本质还是 a 标签，to 无需 #
能高亮，默认就会提供高亮类名，可以直接设置高亮样式

语法： <router-link to="path的值">发现音乐</router-link>

 <div>
    <div class="footer_wrap">
      <router-link to="/find">发现音乐</router-link>
      <router-link to="/my">我的音乐</router-link>
      <router-link to="/friend">朋友</router-link>
    </div>
    <div class="top">
      <!-- 路由出口 → 匹配的组件所展示的位置 -->
      <router-view></router-view>
    </div>
  </div>

使用router-link跳转后，我们发现。当前点击的链接默认加了两个class的值 router-link-exact-active和router-link-active

我们可以给任意一个class属性添加高亮样式即可实现功能

1.router-link-active（模糊匹配）

to=“/my” 可以匹配 /my /my/a /my/b …

只要是以/my开头的路径都可以和 to="/my"匹配到

2.router-link-exact-active（精确匹配）

to=“/my” 仅可以匹配 /my

如何查询参数传参？

在vue中传参一般有两种方式

查询参数传参
动态路由传参

编程式导航，如何跳转传参？

1.path路径跳转

query传参

this.$router.push('/路径?参数名1=参数值1&参数2=参数值2')
this.$router.push({
  path: '/路径',
  query: {
    参数名1: '参数值1',
    参数名2: '参数值2'
  }
})

动态路由传参

this.$router.push('/路径/参数值')
this.$router.push({
  path: '/路径/参数值'
})

2.name命名路由跳转

query传参

this.$router.push({
  name: '路由名字',
  query: {
    参数名1: '参数值1',
    参数名2: '参数值2'
  }
})

动态路由传参 (需要配动态路由)

this.$router.push({
  name: '路由名字',
  params: {
    参数名: '参数值',
  }
})

三、动态路由传参

1.配置路由传参

 const router = new VueRouter({
  routes: [
    ...,
    { 
      path: '/search/:words', 
      component: Search 
    }
  ]
})

2.配置导航链接to="/path/参数值"
3.对应页面组件接受参数

$route.params.参数名

params后面的参数名要和动态路由配置的参数保持一致

查询参数传参 VS 动态路由传参

查询参数传参 (比较适合传多个参数)
1. 跳转：to=“/path?参数名=值&参数名2=值”
2. 获取：$route.query.参数名
动态路由传参 (优雅简洁，传单个参数比较方便)
1. 配置动态路由：path: “/path/:参数名”
2. 跳转：to=“/path/参数值”
3. 获取：$route.params.参数名
注意：动态路由也可以传多个参数，但一般只传一个

总结

Vue.js 提供了 Vue Router 来进行前端路由的管理，使得单页面应用（SPA）能够实现页面之间的切换和导航。以下是关于 Vue Router 的一些总结：

基本路由配置：Vue Router 通过创建路由对象，将不同的路径映射到不同的组件上，实现页面的跳转。可以配置路由规则，也可以通过动态路由和嵌套路由来管理复杂的页面结构。
路由导航：Vue Router 提供了多种导航方式，如通过 router-link 组件、编程式导航（this. $ro u t er . p u s h 、 t hi s .$ router.replace）等方式实现页面跳转，并且可以设置路由的参数和查询参数。
路由传参：Vue Router 允许通过路由参数和查询参数来传递数据，组件可以通过 this. $ro u t e . p a r am s 和 t hi s .$ route.query 来获取传递的参数，实现页面间数据的传递。
导航守卫：Vue Router 提供了一些导航守卫的钩子函数，如 beforeRouteEnter、beforeRouteLeave 等，可以在路由跳转前后执行一些操作，如验证登录状态、权限管理等。
路由懒加载：为了优化应用性能，Vue Router 支持路由懒加载，可以按需加载路由对应的组件，减少首次加载时的资源占用和提高页面加载速度。
路由模式：Vue Router 支持多种路由模式，包括 hash 模式和 history 模式，默认使用的是 hash 模式，可以通过配置来选择不同的模式。