vue3路由的使用

一、路由的概要

1.1、什么是路由？

• 路由就是一组映射关系，根据不同的 url 地址展示不同的内容或页面（key-value）；

  • key为路径，value可能是function或component

• 路由 ( 英文: router ) 就是对应关系

  • 通俗易懂的概念：Hash 地址与组件之间的对应关系

• SPA与前端路由

  • SPA指的是一个web 网站只有唯一的一个HTML页面，所有组件的展示与切换都在这唯一的一个页面内完成。

  • 此时，不同组件之间的切换需要通过前端路由来实现

1.2、SPA应用：

• 单页Web应用（single page web application,SPA）

• 整个应用只有一个完整的页面

• 点击页面中的导航链接不会刷新页面，只会在页面局部更新

• 数据需要通过ajax请求获取

1.3、路由的分类

1.3.1、后端路由

理解： value是function，用于处理客户提交的请求

工作过程： 浏览器在地址栏切换url时，会向服务器发送请求，服务器响应后，会根据请求路径找到匹配的函数来处理请求，返回响应数据（页面）。

优点： 分担了前端的压力，html和数据的拼接都是由服务器完成。

缺点： 浏览器会刷新页面，且前后端不分离，当项目十分庞大时，加大了服务器端的压力，同时在浏览器端不能输入制定的url路径进行指定模块的访问。另外一个就是如果当前网速过慢，那将会延迟页面的加载，对用户体验不是很友好。

1.3.2、前端路由

理解： value是component，用于展示页面内容

工作过程： 当浏览器的路径改变时，对应的组件就会显示

优点:

• 用户体验好，和后台网速没有关系，不需要每次都从服务器全部获取，快速展现给用户

• 可以再浏览器中输入指定想要访问的url路径地址

• 实现了前后端的分离，方便开发。有很多框架都带有路由功能模块。

缺点:

• 使用浏览器的前进，后退键的时候会重新发送请求，没有合理地利用缓存

• 单页面无法记住之前滚动的位置，无法在前进、后退的时候记住滚动的位置

路由操作：

• ① 用户点击了页面上的路由链接

• ② 导致了 URL 地址栏中的 Hash 值发生了变化

• ③ 前端路由监听了到 Hash 地址的变化

• ④ 前端路由把当前 Hash 地址对应的组件渲染都浏览器中

结论：前端路由，指的是 Hash 地址与组件之间的对应关系！

1.4、vue-router 使用方法：

1.4.1、基本路由：

1.安装vue-router，执行命令：npm i vue-router（终端）

2.在 src 源代码目录下，新建router / index.ts 路由模块，并初始化如下的代码：

import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";

// 自定义的组件文件
import Home from "../views/Home.vue";
import About from "../views/About.vue";
import Movie from "../views/Movie.vue";
// routes 是一个数组，作用：定义 'hash 地址' 与 '组件之间的对应关系'
let routes: RouteRecordRaw[] = [
  { path: "/", component: Home },
  { path: "/movie", component: Movie },
  { path: "/about", component: About },
];
// 创建路由对象
let router = createRouter({
  history: createWebHashHistory(), // 指定路由模式
  routes,
});

// 向外共享路由的实例对象
export default router;

3.在 src / main.ts 入口文件中，导入并挂载路由模块

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

let app=createApp(App)

app.use(router).mount('#app');

4、声明路由链接和占位符

App.vue文件：

<template>
  <!-- 当安装了vue-router后，可以使用 router-link 来替代普通的a链接 -->
  <router-link to="/">首页</router-link> |
  <router-link to="/movie">电影</router-link> |
  <router-link to="/about">关于</router-link>
  <!-- 只要在项目中安装和配置了 vue-router，就可以使用 router-view 这个组件 -->
  <!-- 它的作用很单纯:占位符，相当于一个容器 -->
  <router-view></router-view>
</template>

<script lang="ts" setup></script>

1.4.2、嵌套路由：

1、创建两个子组件

components/one：

<!-- 案例一 -->
<template lang="">
    <div>
        <h1>按键事件1</h1>
    </div>
</template>
<script>
export default {

}
</script>
<style lang="">

</style>

components/two：

<!-- 案例二 -->
<template lang="">
    <div>
        <h1>按键事件2</h1>
    </div>
</template>
<script>
export default {

}
</script>
<style lang="">

</style>

2、配置路由规则，使用children配置项：

{
    path: '/test16',
    component: test16,
    redirect: '/test16/one', // 默认路由 默认页面
    children: [
      // 子路由
      { path: '/test16/one', component: test16_1},
      { path: '/test16/two', component: test16_2},
    ]
  },

3、自定义一个vue文件，跳转（要写完整路径）

 　　　　　　<div>
                <!-- 当安装了vue-router后，可以使用 router-link 来替代普通的a链接 -->
                <div><router-link to="/test16/one">按键事件1</router-link></div>
                <div><router-link to="/test16/two">按键事件2</router-link></div>
            </div>
            <div>
                <!-- 只要在项目中安装和配置了 vue-router，就可以使用 router-view 这个组件 -->
                <!-- 它的作用很单纯:占位符，相当于一个容器 -->
                <router-view></router-view>
            </div>

4、可以在App.vue直接调用自定义的vue文件

<router-link to="/test16">嵌套路由</router-link> |

<router-view/>

5、图片演示

1.4.3、路由的query参数(路由传参)

1.传递参数

//跳转并携带query参数，to的字符串写法
<router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link>
//跳转并携带query参数，to的对象写法
<router-link
    :to="{
        path:'/home/message/detail',
        query:{
            id:666,
            title:'你好'
        }
    }"
>跳转</router-link>

2.接收参数（.vue文件中）

{{ $route.query.id }}
{{ $route.query.title }}

1.4.4、路由的params参数(路由传参)

1.配置路由，声明接收params参数

{
    path:'/home',
    cpmponent:Home,
    children:[
        {
            path:'news',
            component:News
        },
        {  
            path:'message'
            components:Message,
            children:[
                {
                    name:'xuexi',
                    path:'detail/:id/:title',//:xxx是占位符，用来声明接收params参数
                    component:Detail
                }
            ]
        }
    ]
}

2.传递参数

路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置

//Message.vue
//跳转并携带params参数，to的字符串写法
<router-link :to="/home/message/detail/666/你好">跳转</router-link>
//跳转并携带params参数，to的对象写法
<router-link
    :to="{
        name:'xuexi',
        params:{
            id:666,
            title:'你好'
        }
    }"
>跳转</router-link>

3.接收参数

//Detail.vue
<template>
    <ul>
        <li>消息编号：{{$route.params.id}}</li>
        <li>消息标题：{{$route.params.title}}</li>
    </ul>
</template>
<script>
    export default{
        name:'Detail',
    }
</script>

1.4.5、路由的props配置

作用：让路由组件更方便的收到参数

使用场景：路由组件读取参数时太麻烦

解决方法：在路由的配置文件中找到需要接收参数的路由组件，为其增加props配置项

第一种写法： props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件

//index.js
{
    name:'xuexi',
    path:'detail/:id',
    component:Detail,
    //不常用，因为数据是写死的
    props:{a：900}
}

//Detail.vue
<template>
    <div>读取a{{a}}</div>
</template>
<script>
    export default{
        name:'Detail',
        props:['a'],
    }
</script>

第二种写法： props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件

//index.js
{
    name:'xuexi',
    path:'detail/:id',
    component:Detail,
    //不推荐，只能接收params参数
    props:true,
}

//Detail.vue
<template>
    <ul>
        <li>消息编号：{{id}}</li>
        <li>消息标题：{{title}}</li>
    </ul>
</template>
<script>
    export default{
        name:'Detail',
        props:['id','title'],
    }
</script>

第三种写法（常用）： props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件

//index.js
{
    name:'xuexi',
    path:'detail/:id',
    component:Detail,
    props($route){
        return{
            id:$route.query.id,
            title:$route.query.title
        }
    }
}

//Detail.vue
<template>
    <ul>
        <li>消息编号：{{id}}</li>
        <li>消息标题：{{title}}</li>
    </ul>
</template>
<script>
    export default{
        name:'Detail',
        props:['id','title'],
    }
</script>

1.4.6、<router-link>的replace属性

1.作用：控制路由跳转时操作浏览器历史记录的模式

2.浏览器的历史纪录有两种写入方式：分别为push和replace

• push是追加历史记录（路由跳转时默认为push）
• replace是替换当前记录

3.开启replace模式：<router-link replace...>News</router-link>

1.4.7、声明式导航 & 编程式导航

1.4.7.1、介绍

• 在浏览器中，点击链接实现导航的方式，叫做声明式导航。例如：

• • 普通网页中点击 <a> 链接， vue项目中点击 <router-link> 都属于声明式导航

• 在普通浏览器中,调用API方法实现导航的方式，叫做编程式导航。例如：

• • 普通网页中调用 location.href 跳转到新页面的方式，属于编程式导航

1.4.7.2、vue-router 中的编程式导航API

  vue-router 提供了许多编程式导航的API，其中最常用的导航API分别是：

• 1.this.$router.push('hash地址')
  • 跳转到指定 hash 地址，并增加一条历史记录　　　　

• 2.this.$router.replace('hash地址')
  • 跳转到指定的 hash 地址，并替换当前的历史记录

• 3.this.$router.go(数值)
  • 调用 this.$router.go() 方法，可以在浏览历史中前进或后退。实例代码如下

    function xx(){
          // go(-1) 表示后退一层
          // 如果后退的层数超过上限,则原地不动
          // go(-1) 反之亦然
          this.$router.go(-1)
        }

1.4.8、$router.go 的简化用法

  在实际开发中，一般只会前进或后退一层页面。因此 vue-router 提供了如下两个便捷方法

• 1.$router.back();
  • 在历史记录中，后退到上一个页面

• 2.$router.forward();
  • 在历史记录中，前进到下一个页面

1.4.9、导航守卫

  导航守卫可以控制路由的访问记录权限

1.全局前置守卫

每次发生路由的导航跳转的时,都会触发全局前置守卫。因此，在全局前置守卫中，程序员可以对每个路由进行访问权限的控制

 const router = new VueRouter({...})
 router.beforEach(fn)

2.守卫方法的3个形参

   router.beforeEach(()=>{
        // to 是将要访问的路由的信息对象
        // from 是将要离开的路由的信息对象
        // next 是一个函数,调用 next () 表示放行，允许这次路由导航
      })

3.next函数的3种调用方式

• 1.当前用户拥有后台主页的访问权限，直接放行：next()

• 2.当前用户没有后台主页的访问权限，强制其跳转到登陆页面：next('/longin')

• 3.当前用户没有后台主页的访问权限，不允许跳转到后台页面：next(false)