【Vue 自学笔记】vue-router 路由

什么是路由？

官方给出的介绍如下：

服务端路由指的是服务器根据用户访问的 URL 路径返回不同的响应结果。当我们在一个传统的服务端渲染的 web 应用中点击一个链接时，浏览器会从服务端获得全新的 HTML，然后重新加载整个页面。
然而，在单页面应用中，客户端的 JavaScript 可以拦截页面的跳转请求，动态获取新的数据，然后在无需重新加载的情况下更新当前页面。这样通常可以带来更顺滑的用户体验，尤其是在更偏向“应用”的场景下，因为这类场景下用户通常会在很长的一段时间中做出多次交互。
在这类单页应用中，“路由”是在客户端执行的。一个客户端路由器的职责就是利用诸如 History API 或是 hashchange 事件这样的浏览器 API 来管理应用当前应该渲染的视图。

与实际结合的简单理解：为页面或组件配置 url，方便页面/组件间的跳转。

vue-router 的安装

由于前面使用的是 vite 部署的 vue 脚手架，是莫得办法安装 vue-router 和 vuex 的，这算是 vite 的不足吧，需要自己手动安装一下。

views目录

views：这个目录可以看成是微信小程序中的 pages 目录，是页面，把它理解成大号组件也没问题。

views VS. components：一般而言，components是组件，可以被多个views复用的；但对于 views 而言，通常不会被复用。

router配置文件

router/index.js：这个文件是用于配置路由跟页面的导航关系。

const routes = [
    {
        path: '/',
        name: 'home',
        component: HomeView
    },
    {
        path: '/about',
        name: 'about',
        component: () => import('../views/AboutView.vue')
    }
]

这里配置了两个路由，home和about。名为home 的路由负责导航跳转到 HomeView 页面，另一个名为about的路由负责导航跳转到AboutView页面。

router-link和router-view

来自官方文档的介绍：

不同于常规的 <a> 标签，我们使用组件 RouterLink 来创建链接。这使得 Vue Router 能够在不重新加载页面的情况下改变 URL，处理 URL 的生成、编码和其他功能。
RouterView 组件可以使 Vue Router 知道你想要在哪里渲染当前 URL 路径对应的路由组件。它不一定要在 App.vue 中，你可以把它放在任何地方，但它需要在某处被导入，否则 Vue Router 就不会渲染任何东西。

总结：router-link用来渲染一个链接的组件，该链接在被点击时会触发；router-view根据指定路由动态渲染对应的组件。

如何修改路由？

假如现在使用router-view渲染我们的页面，那如果我在入口页面 App.vue使用router-view渲染主页面，当触发某些条件时导航到指定页面，该怎么做？
这里需要用到router.push()方法，官方也给出使用方法。

实操

假定我们现在想要实现这样一个功能：在 home页面下的一个组件有一张图片，当我们点击图片时就会跳转到详情页面。

以下内容接着上次的内容进行修改。

页面和路由配置

了解了router-view的功能后，我们先将App.vue的代码移到home页面下，给 App.vue打上router-view标签，在router/index.js配置了起始页面为 home页面，并添加详情页detail的路由信息。

views/home.vue

<template>
  <swpier :url="url" @my-event="fromSub"></swpier>
  <router-link to="/detail">跳转</router-link>
</template>

<script setup>
import swpier from '@/components/swiper.vue'
import url from '@/assets/logo.svg'

function fromSub(event){
  console.log('接收到子组件的事件返回:',event)
}
</script>

详情页views/detail.vue

<template>
  <div>这是详情页面</div>
</template>

App.vue

<template>
  <router-view></router-view>
</template>

router/index.js

import { createRouter, createWebHashHistory } from 'vue-router'
import home from '../views/home.vue'
import detail from '../views/detail.vue'
const routes = [
    {
        path: '/',
        name: 'home',
        component: home
    },
    {
        path: '/about',
        name: 'about',
        component: () => import('../views/AboutView.vue')
    },
    // 新增路由
    {
      path: '/detail',
      name: 'detail',
      component: detail
    }
]
const router = createRouter({
    history: createWebHashHistory(),
    routes
})
export default router

home页面

上次我们已经对组件进行了监听，当swiper组件中的图片触发点击事件时，就会向当前页面发送消息。同理，当我们监听到事件被触发时，我们需要进一步向上传递，去改变App.vue的路由。

views/home.vue添加事件：

<template>
  <swpier :url="url" @my-event="fromSub"></swpier>
</template>

<script setup>
import swpier from '@/components/swiper.vue'
import url from '@/assets/logo.svg'

var emits = defineEmits(['change-view'])
function fromSub(event){
  emits('change-view')
}
</script>

App.vue修改路由

App.vue监听来自 home页面的事件并修改路由：

<script setup>
import router from "@/router/index.js";

function onChangeView() {
  router.push('/detail')
}
</script>

<template>
  <router-view @change-view="onChangeView"></router-view>
</template>

这里还是组件间的数据传递，然后调用一下router.push()方法修改路由，对页面进行渲染。

实际效果

初始页面：

点击图片后：

这里主要注意以下 url 发生了变化，说明路由导航成功了。