DAY20240909 VUE:编程式导航，动态路由，命名路由

---

一、点击‘正在热映’列表能跳到对应详情

1编程式导航

列表跳详情Datail.vue

创建新组件—详情Datail.vue组件

模拟’正在热映’电影 列表页面

为Datail.vue组件 配置路由、引入路由

line 34-37 line 9


在url上验证：测试成功！

使用vue里的编程式导航方案实现点击列表跳转detail页面里

绑一个事件，编程式导航，点击列表可以跳到detail页面里。
this.$router.push('/detail')，它的优势是能自动识别是哪种模式，自动识别加没加#,能避免#导致的错误。

辨析

• 编程式导航写法只能用在列表中？❌ 也不是。只是它更适合列表场景。router-link 更适合少的时候。

  编程式导航（如 this.$router.push(…)）并不仅仅限于列表场景，但它确实更适合在需要动态控制导航行为的情况下使用，例如根据用户点击不同列表项来决定导航的目标。相比之下， 更适合简单的静态场景，比如页面上只有少量导航链接且不需要复杂逻辑控制时使用。

• router-link 只能写死？❌ ——> to 可以加冒号：

  router-link 并不只能写死（即指定固定的路径）。通过在 to 属性前加上冒号（:to），可以将其变为动态绑定，这样就可以根据变量或表达式的值来决定导航的目标。例如， 可以根据不同的 id 动态生成导航路径。

2动态路由

列表跳详情，detail组件怎么知道我该显示哪一项的信息？把电影的id带过来。后面的5678就是所点击的电影的id。后端根据id传回对应的详情信息。
交互流程
1前端请求电影列表:用户进入电影列表页面,前端通过 axios 向后端的 /film/list 接口发送一个 GET 请求，以获取电影列表数据;后端接收到 /film/list 请求，查询数据库或数据源以获取电影列表数据，并将结果以 JSON 格式返回给前端。

2用户点击某个电影项:前端接收到后端返回的电影列表数据，将数据渲染在页面上。每个列表项包括一个链接，用于点击后跳转到电影详情页面。用户点击某个电影项后，前端通过 location.hash 获取电影的 ID，并更新 URL 中的哈希部分（如 #/film/1）。

3.前端获取电影 ID 并请求详情信息：前端监听 location.hash 的变化，当哈希变化时，提取电影 ID，并向后端的 /film/detail 接口发送请求，获取对应的电影详情信息。

4.后端返回电影详情数据：后端接收到 /film/detail 请求，提取电影 ID，并查询数据库或数据源，获取该电影的详细信息，然后以 JSON 格式返回给前端。

5前端渲染电影详情页面：前端接收到后端返回的电影详情数据，将数据渲染在电影详情页面上，展示该电影的详细信息。

正在热映界面往详情界面url上拼接id

把id传过来，这里用的是data，传过去然后

往路径上拼上id

二级路由不确定，是动态的，之前写死的方法肯定是不行的。line39的样式为写死的方式，我们应该把它改成动态路由。

line35 :myid是随便写的，用来路由占位的 line35 ,此时在地址栏里测试，只写/detai 不满足动态的二级路由，跳不过去到详情页了，/detail/111这种形式才符合二级路由的形式。

😀：举一反三，这样是三级路由

负责detail.vue的人怎么获取id发axios请求?我们希望每次进到detail页面之后拿到id，
想到created生命周期：每次进到页面都会执行一次。

Detail页面接收id

this.$router拿到的是整个路由对象，this.$route只拿到的是当前匹配到的路由。

this.$router
定义: this.$router 是 Vue Router 的实例对象，代表整个路由器（router）实例。
作用: 提供了导航功能和路由配置的管理，可以用来编程式地导航到不同的路由或获取路由器的全局信息。
使用场景: 用于执行路由跳转、访问全局路由配置、控制路由行为等操作。
常用方法:
this.$router.push('/'): 用于导航到指定的路由路径。
this.$router.replace('/'): 导航到指定路由路径并替换当前历史记录（不会留下历史记录）。
this.$router.back(), this.$router.forward(), this.$router.go(n): 控制浏览器的前进和后退操作。

this.$route
定义: this.$route 是当前激活（匹配到）的路由对象，表示当前路由的信息。
作用: 包含了当前路由的相关信息，比如路由的 path、params（参数）、query（查询参数）、name（命名路由）、meta（元信息）等。
使用场景: 用于访问当前路由的状态信息，如当前路由的路径、传递的参数、查询字符串等。
常用属性:
this.$route.path: 当前路由的路径（如 /film/1）。
this.$route.params: 动态路由参数对象（如 { id: '1' }）。
this.$route.query: 查询参数对象（如 { search: 'keyword' }）。
this.$route.name: 当前路由的名称（如果有命名路由的话）。

总结
this.$router: 代表整个路由实例，主要用于执行路由跳转和路由操作。
this.$route: 代表当前匹配到的路由对象，主要用于访问当前路由的状态和参数。
通过 this.$router 你可以操作路由，而通过 this.$route 你可以获取当前路由的详细信息。

注意line 10处的id应该写成下面的myid。

3命名路由

以前通过路径跳转，现在通过命名路由跳转。

给路由起个名字 Line35
前一个id应该写的是myid，后一个id是上面函数的参数。

4关于声明式导航和编程式导航

在 Vue.js 中， 是声明式导航，直接在模板中定义导航路径，适合简单的场景；

// 声明式导航
<template>
  <div>
    <!-- 使用声明式导航 -->
    <router-link to="/detail">跳转到详情页</router-link>
  </div>
</template>

而 this.$router.push(‘/detail’) 是编程式导航，通过 JavaScript 代码动态触发导航，适用于需要基于逻辑条件或用户操作进行灵活控制的场景。

// 编程式导航
<template>
  <div>
    <!-- 编程式导航示例 -->
    <button @click="goToDetail">跳转到详情页</button>
  </div>
</template>

<script>
export default {
  methods: {
    goToDetail() {
      // 使用编程式导航
      this.$router.push('/detail');
    }
  }
};
</script>

5 参考资料

【1】 https://b23.tv/Hhfpaz2