三、Vue3集成Vue-router实现路由跳转

简介 

Vue Router 是Vue的官方路由。

客户端路由的作用是在单页应用 (SPA) 中将浏览器的 URL 和用户看到的内容绑定起来。当用户在应用中浏览不同页面时，URL 会随之更新，但页面不需要从服务器重新加载。

Vue Router 基于 Vue 的组件系统构建，你可以通过配置路由来告诉 Vue Router 为每个 URL 路径显示哪些组件。

如何定义一个新的路由

a标签明显有一个刷新的效果，而RouterLink没有

编程式路由

import router from "@/router/index.js";

push：跳转后可以返回

replace：跳转后无法返回

默认路由 

默认页面让他通过重定向的方式跳转 

这样在访问根目录的时候就会重定向到/home

路由传参

有两种方式去实现 

        第一种方式

        我们使用的都是query类型的参数

        传参：router.push("/test?id=1")        获取参数：通过router.currentRoute.vlue.query 获取到query对象

        举例：                          

        即可看到参数值

        第二种方式

​

嵌套路由

在父级的页面通过<RouterView/>可以展现子页面的内容 

注意：在嵌套路由中，子路由不用写前面的/，会自动添加，那么访问路径就是/manager/home；如果你的子路由添加了/的话，那访问路径上就不要在写父路由的路径了，否则会映射不到。

嵌套路由示例： 

此时如果访问/home（子路由）就会展示子路由和父路由嵌套的页面

路由守卫 

在路由配置文件中使用导航守卫，用于修改网页标题 

定义错位路径导航的404页面 

定义404路由

输入错误的时候统一到达404页面怎么做？

需要在index.js加一个