vue router的使用

一、引入

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。

二、单页面应用

这种路径变化，就展示不同页面的网页，我们把他称为单页面应用（Single Page Application，SPA）

它一种Web应用程序的架构模式，其特点是在加载应用程序时只需从服务器加载一次HTML页面，之后所有的交互和页面更新都通过JavaScript动态完成，而不需要重新加载整个页面。

SPA 的核心思想是将应用划分为多个组件，通过前端路由来控制不同组件的显示，实现页面的切换和更新。

主要特点和优势包括：

1. 无需刷新页面： SPA 通过 AJAX 或 WebSocket 等技术实现页面内容的异步加载和更新，用户在应用中切换页面时不需要重新加载整个页面，提供了更加流畅的用户体验。
2. 动态加载： 只加载所需的内容和资源，避免了每次访问都加载整个页面的开销，减轻了服务器的负担，提高了页面加载速度。
3. 前端路由： SPA 使用前端路由来管理不同页面之间的切换，而不是依赖后端路由。这样可以在不同页面之间切换，而不需要向服务器发出新的请求。
4. 更接近传统应用体验： SPA 的用户体验更接近传统桌面应用，因为用户在应用中导航时不会感觉到整个页面的刷新，从而提高了用户满意度。
5. 更容易实现动态内容： 由于SPA采用了前端路由，可以更容易地实现动态加载内容、无感知地获取数据，以及实现一些类似于懒加载的技术。

三、vue router的安装和使用

3.1 安装

pnpm install vue-router

3.2 使用

设定目录的化名

为了方便我们在移动组件的时候方便，我们在项目中一般会用@来对应src目录，在根路径的vite.config.js中加入

resolve: {
    alias: {
      "@": "/src",
    },
  },

在项目中使用vue router，大致需要以下三步

1. 创建配置好router 实例，也即定义好，什么路径，渲染什么组件，给浏览器一个path（路径），浏览器就跳到一个页面
2. 在main.js中使用配置，也即定义好，我要在这个vue app中使用路由这个插件，在vue实例上面挂载定义好的路由实例
3. 定义好页面在哪里显示，前两步做完后，还需要在页面定义一个展示页面的位置。

在src/router文件夹下，新建index.js文件，在文件中，写入如下代码：

// 1.引入 创建路由实例和路由模式的函数
import { createRouter, createWebHistory } from "vue-router";
// createWebHashHistory  // hash #'模式   地址带hash值
// createWebHistory  // history 模式  历史路由模式
// 静态引入
import home from "../pages/home.vue";

// 创建路由实例和路由模式
const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: "/",
      // component:() => import('@/pages/home.vue')//动态引入
      component: home,
      name: "home",
      redirect: "/axios1",
    },

    {
      path: "/axios1",
      name: "axios1",
      component: () => import("@/components/axios/AxiosNew.vue"), //动态引入
    },
  ],
});
// createRouter  参数是一个对象
// 属性 history: 使用的路由模式
// 属性 routes: 路由规则数组  数组中每一个规则对象模式配置

// 暴露出路由实例
export default router;

• routes中可以定义的属性有：

1. path (string): 路由的路径。可以是一个静态路径，也可以包含动态路径参数。
2. name (string): 路由的名称。用于在程序中标识路由，便于在导航时引用。
3. component (Component): 路由对应的组件。指定该路由匹配时应该渲染的组件。
4. redirect (string | Function): 重定向到其他路由。可以是一个字符串路径或一个返回路径的函数。
5. children (Array): 嵌套路由。允许在一个路由下定义子路由，形成嵌套的路由结构。
6. meta (any): 元信息。可以是任意类型的数据，用于存储与路由相关的额外信息。

在src/main.js文件中，加入如下代码，主要是引入router，并且.use(router)

import { createApp } from "vue";
import "./style.css";
import App from "./App2.vue";
import router from "./router/index.js";

createApp(App).use(router).mount("#app");

在/src文件夹下新增App2.vue组件,主要是这个router-view标签，只有定义了它你的路由才能渲染在这上面

<template>
  <router-view />
</template>
<script setup></script>
<style></style>

• history模式与hash模式的区别，可以粗略的记为：

hash模式，url中会有#，而history模式没有没有#号

路由跳转

4.1 router-link

使用router link组件，即可直接跳转，使用方法为:

他接受一个to属性，这个属性可以是一个字符串，也可以是一个对象

如果是字符串，那么则代表需要跳转的路径

如果是对象，则可接受以下属性：

• path (string): 目标路由的路径，表示要导航到的页面的路径。
• name (string): 要导航到的目标路由的名称。
• params (Object): 路由的动态片段，用于包含参数，例如 /user/:id 中的 id。
• query(Object): 用于包含查询参数的对象，例如 /path?query=string 中的 query 部分。
• state(Object): 用于传递状态的对象，可以在导航时与目标路由相关联。这个状态在目标页面中可以通过 window.history.state 访问到。

<router-link :to="{ path: 'user', query: { id: '1' },state:{a:1}}"
      >query跳转到用户</router-link
    >
    <br>
<!-- 需要路由先配置动态参数test -->
    <router-link :to="{ name: 'user', params: { test: '1' },state:{b:1}}"
      >params跳转到用户</router-link
    >
    <br>
    <router-link to="axios1">跳转到axios</router-link>

注意上述 params、query、state之间的区别

4.2 useRoute方法（url上值的获取）获取当前页面路由信息

我们前面说到可以通过，params和query来向页面中传递数据，那么怎么获取呢，就是通过这个useRoute方法来获取到

const route = useRoute();
console.log(route.query);
console.log(route.params);

4.3 useRouter方法（js跳转路由） 获取整个项目路由信息并实现页面跳转

使用useRouter也可以进行页面的跳转，此方法返回一个路由的实例，在这个实例中，有一个push方法，传入一个参数，属性可以是一个字符串，也可以是一个对象。用此方法，就可以跳转路由，他接受的参数，跟上面的router link相同

再次强调，传参的时候，params传参需要使用name跳转页面，并且提前配置动态路由参数片段；query传参使用path 来跳转路径

import { useRouter } from "vue-router";
const router = useRouter();
function goOther() {
  router.push({ name: "list", params: { test: 1 } });//需要路由规则先配置动态参数test
}

四、路由的嵌套

在后台页面中，我们经常都会碰到下图这种情况，只有中间这部分会被切换，左边菜单和顶部的header都不会改变，这种就是用到了嵌套路由

路由的嵌套，首先需要写一个包裹组件，在包裹组件中定义好 <router-view />标签

<template>
  <div>
    <header>头部</header>
    <main>
      <router-view></router-view>
    </main>
  </div>
</template>
<script setup></script>
<style></style>

然后再到router/index中，将这个页面配置进去，并在其下添加children属性，特别注意，下面的path一定不要再加/，不加/代表的是/menu/list，而加了以后则代表是单独的路由 /list

{//父级路由配置
      path:'/father',
      name:'father',
      component:()=>{ return  import('../pages/father.vue')},
        //动态返回父级组件
        
      // 嵌套的子级
      children:[
        {//子级路由配置
          path:'children',
          name:'children1',
          component:children
            //动态返回子级组件
           
        },{
          path:'children2',
          name:'children2',
          component:()=>{
            return import('../pages/children2.vue')
          }
        }
      ]
    }

嵌套路由 重点 就在于路由规则配置的属性children

children 代表当前的路由是一个嵌套的路由

最外层的路由是配置routes 对应 APP.vue的页面的router-view 路由出口

children子级路由需要有自己的一个路由出口，这个出口九设置在父级路由的组件里面

五、路由懒加载

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效。

Vue Router 支持开箱即用的动态导入，这意味着你可以用动态导入代替静态导入：

// 静态导入
import List from "../page/路由/列表.vue";
// 动态导入
const List = () => import("../page/路由/列表.vue");
const list = ()=>{
return import("../page/路由/列表.vue")
}

小练习

小练习1

新增一个layout组件，组件为顶部固定，左边菜单固定，右边不固定展示，内容在右边不固定的地方进行展示，效果如图

1.定义两个组件，一个是layout, 另一个是children ，children里面内容 是菜单管理

1. 配置路由规则

layout是父级组件 children是子级组件

{

path:'',

name:'',

component:layout组件 //组件可以静态引入或者动态引入

children：[{

path:'',

name:'',

component:children组件

}]

}

子路由组件需要在俘虏有组件里面有一个router-view来展示

小练习2

将右边菜单正确渲染，点击能正确进行跳转，效果如图所示