路由的基本使用

一、概述

路由定义：路径和组件的映射关系；
路由作用：修改地址栏路径时，切换显示匹配的组件；

二、使用（5+2）

5个基础步骤

当我们配置完以上5步之后 就可以看到浏览器地址栏中的路由变成了 /#/的形式。表示项目的路由已经被Vue-Router管理了

两个核心步骤

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

值得注意的是：如果path路径设置为：path:'/'，则这个就是你启动项目时所一开始显示的画面，但我们一般会直接将其重定向为redirect: '/home'，让其一开始就显示首页。

上面的路由规则的意思就是：当我访问该路径时，会跳转到该页面，就是说我不用配置下面路由出口也能完成该功能，但是路由出口的作用是什么呢，我觉得更多是在当前的组件中，我们需要动态在这个页面中渲染一些子页面(子组件)，这时候我们就可以根据路由出口，将这些页面动态渲染到当前页面中，与下面的配置导航不一定是一个连续的操作，看你的需求是什么。

2.配置导航，配置路由出口

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

三、导航

简单的理解：根据需求跳转到对应的页面，而这里的导航更多的是一种动态的跳转，比如我点击某个地方，跳转到哪里，需要传递什么参数等等，需要我们自己去设置。

vue中的导航又分为声明式导航和编程式导航，它们的主要区别定义方式的不同，声明式导航主要是使用模板组件中定义，而编程式导航是使用JavaScript代码定义的

特点	声明式导航	编程式导航
定义方式	使用模板组件（如 <router-link>）	使用 JavaScript 代码
使用场景	适合静态链接、简单导航	适合动态条件下的导航
可读性	更直观，符合 HTML 语义	依赖代码逻辑，可能较复杂
灵活性	固定的链接，灵活性较低	高度灵活，可根据状态变化导航

声明式导航

声明式导航，主要的方式是通过模板种的组件(如<router-link>)来进行路由导航。比较简单，这里不细讲，主要讲讲它的传参方式。

查询参数传参

• 如何传参？
  <router-link to="/path?参数名=值"></router-link>

• 如何接收当前页面的查询参数
  固定用法：$router.query.参数名

动态路由传参

• 配置动态路由

  动态路由后面的参数可以随便起名，但要有语义

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

• 配置导航链接
  to="/path/参数值"

• 对应的页面组件接受参数
  $route.params.参数名

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

编程式导航

编程式导航允许我们在JavaScript中控制路由的跳转，而不是依赖于模板中的<router-link>，它的跳转方式又分为两种

• path 路径跳转 （简易方便）
• name 命名路由跳转 (适合 path 路径长的场景)

(一）path路径跳转

1.语法
特点：简单方便

//简单写法
this.$router.push('路由路径')

//完整写法
this.$router.push({
  path: '路由路径'
})

2.传参

• query传参

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

• 动态路由传参

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

（二）name 命名路由跳转

特点：适合 path 路径长的场景
1.语法：

• 路由规则，必须配置name配置项

  { name: '路由名', path: '/path/xxx', component: XXX },
  

• 通过name来进行跳转

  this.$router.push({
    name: '路由名'
  })
  

2.传参

• query传参

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

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

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

（三）编程式导航中其他导航方法

1.this.$router.replace()

this.$router.replace()是Vue Router提供的一个方法，用于在路由中进行替换导航。与 this.$router.push() 不同，replace 方法不会在历史记录中留下当前路由的记录，这意味着用户无法使用浏览器的“后退”按钮返回到之前的路由。

语法

this.$router.replace(location, onComplete?, onAbort?)

• location：目标路由的路径或路由对象。
• onComplete（可选）：导航完成后的回调。
• onAbort（可选）：导航中止后的回调。

应用场景
(1) 登录后，防止用户点击返回又回到登录页面

this.$router.replace({ // 使用replace,返回时能够直接返回商品页，而不是刚刚的登录页
    path: '/login',
    query: {
      backUrl: this.$route.fullPath
})

(2) 表单提交，防止用户提交表单后点击返回又回到表单页面

submitForm() {
  // 表单处理逻辑
  this.$router.replace('/success'); // 提交后跳转
}

2.this.$router.go()

用于在路由历史记录中向前或向后导航。它的参数可以是一个整数，表示要移动的步数。

语法

this.$router.go(n)

• n：一个整数，正数表示向前导航，负数表示向后导航。例如，-1 将返回上一个页面，1 则会前进一个页面（如果有的话）。

应用场景

• 用户界面控制： 在应用中提供“返回”和“前进”按钮，允许用户方便地导航历史。
• 特定条件下的导航： 在特定逻辑下，比如表单未填写时，禁止用户前进，但允许他们返回。
• 复杂的导航需求： 当使用多个页面和状态时，可以通过历史记录控制用户的导航体验。