13-Vue基础之路由

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

一、什么是路由？

路由是一种映射关系
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. 查询参数传参 (比较适合传多个参数)

   1. 跳转：to=“/path?参数名=值&参数名2=值”
   2. 获取：$route.query.参数名

2. 动态路由传参 (优雅简洁，传单个参数比较方便)

   1. 配置动态路由：path: “/path/:参数名”
   2. 跳转：to=“/path/参数值”
   3. 获取：$route.params.参数名

   注意：动态路由也可以传多个参数，但一般只传一个

总结

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

1. 基本路由配置：Vue Router 通过创建路由对象，将不同的路径映射到不同的组件上，实现页面的跳转。可以配置路由规则，也可以通过动态路由和嵌套路由来管理复杂的页面结构。

2. 路由导航：Vue Router 提供了多种导航方式，如通过 router-link 组件、编程式导航（this.$router.push、this.$router.replace）等方式实现页面跳转，并且可以设置路由的参数和查询参数。

3. 路由传参：Vue Router 允许通过路由参数和查询参数来传递数据，组件可以通过 this.$route.params和this.$route.query 来获取传递的参数，实现页面间数据的传递。

4. 导航守卫：Vue Router 提供了一些导航守卫的钩子函数，如 beforeRouteEnter、beforeRouteLeave 等，可以在路由跳转前后执行一些操作，如验证登录状态、权限管理等。

5. 路由懒加载：为了优化应用性能，Vue Router 支持路由懒加载，可以按需加载路由对应的组件，减少首次加载时的资源占用和提高页面加载速度。

6. 路由模式：Vue Router 支持多种路由模式，包括 hash 模式和 history 模式，默认使用的是 hash 模式，可以通过配置来选择不同的模式。

总的来说，Vue Router 提供了丰富的功能和灵活的配置方式，能够帮助开发者实现前端路由管理，构建复杂的单页面应用。熟练使用 Vue Router，可以提高开发效率，同时也能够更好地实现页面间的交互和导航控制。