Vue3.0 路由学习(八)

一.URL的hash

前端路由是如何做到URL和内容进行映射呢？监听URL的改变。

 URL的hash
    -- URL的hash也就是锚点(#), 本质上是改变window.location的href属性；
    -- 我们可以通过直接赋值location.hash来改变href, 但是页面不发生刷新；
    -- hash的优势就是兼容性更好，在老版IE中都可以运行，但是缺陷是有一个#，显得不像一个真实的路径。

实际截图

image.png

二. HTML5的History

history接口是HTML5新增的, 它有l六种模式改变URL而不刷新页面：
   -- replaceState：替换原来的路径； 
   -- pushState：使用新的路径； 
   -- popState：路径的回退； 
   -- go：向前或向后改变路径； 
   -- forward：向前改变路径； 
   -- back：向后改变路径；

实际截图

image.png

三.认识vue-router

1. vue-router是基于路由和组件的
   -- 路由用于设定访问路径, 将路径和组件映射起来.
   -- 在vue-router的单页面应用中, 页面的路径的改变就是组件的切换
2. 安装Vue Router：npm install vue-router@4

3. 路由的使用步骤
    -- 第一步：创建路由组件的组件；
    -- 第二步：配置路由映射: 组件和路径映射关系的routes数组；
    -- 第三步：通过createRouter创建路由对象，并且传入routes和history模式；
    -- 第四步：使用路由: 通过<router-link>和<router-view>；

三.一路由的基本使用流程

image.png
image.png

四.一 路由重定向

什么是路由重定向呢? 就是当你打开本地或者线上的项目地址如何路由没有做重定向的话,默认什么也不会在浏览器上显示出来,例如:

image.png

四.二 需求:当打开http://localhost:8081/(本地)或者线上地址的时候我想默认让Home组件的数据显示出来,这种情况的话 就需要使用重定向了redirect

1. 默认情况下, 进入网站的首页, 我们希望<router-view>渲染首页的内容；
2. 但是我们的实现中, 默认没有显示首页组件, 必须让用户点击才可以；
3. 如何可以让路径默认跳到到首页, 并且<router-view>渲染首页组件呢?
    -- 我们在routes中又配置了一个映射：
    -- (1) path配置的是根路径: /
    -- (2) redirect是重定向, 也就是我们将根路径重定向到/home的路径下, 这样就可以得到我们想要的结果了.

4. 具体代码如下:
const routes = [
  {
    path:'/',
    redirect: '/home'
  },
  {
    path:"/home", // 当你点击按钮跳转的路径
    component:Home // 当你点击按钮跳转时对应的组件
  },
  {
    path:"/about", // 当你点击按钮跳转的路径
    component:About // 当你点击按钮跳转时对应的组件
  }
];

实际截图:

image.png

五 . 路由的 history模式

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL), // 路由的模式指定
  routes,
});

image.png

六.router-link

1. router-link事实上有很多属性可以配置：
    -- 1.1 to属性: 是一个字符串，或者是一个对象

to属性的实际操作:

image.png

    -- 1.2 replace属性：设置 replace 属性的话，当点击时，会调用 router.replace()，而不是 router.push()；
  

replace属性实际操作:

image.png

  -- 1.3 active-class属性：设置激活a元素后应用的class，默认是router-link-active
  这个玩意可以做什么用呢?
    -- 当需求: 我想让你点击的路由的字体颜色变为红色,你就可以使用这个属性了

active-class属性的实际截图:

image.png

  -- 1.4 exact-active-class属性：链接精准激活时，应用于渲染的 <a> 的 class，默认是router-link-exact-active；

  -- 1.5 tag 属性在Vue3.0中已经被去掉了

实际截图看效果:

image.png

七. 路由懒加载

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载：
   -- 如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会
更加高效,也可以提高首屏的渲染效率；
   -- 其实这里webpack分包知识，而Vue Router默认就支持动态来导入组件：
   -- 这是因为component可以传入一个组件，也可以接收一个函数，该函数 需要放回一个Promise；
   -- 而import函数就是返回一个Promise；

没有使用 路由懒加载:

image.png

使用路由懒加载写法一:

image.png

使用路由懒加载写法二:

image.png

打包前和打包后的效果

image.png

分包命名:

image.png

八.路由的其他属性

    -- 1. 路由的name属性(name属性的作用:可以通过name属性进行路由跳转):
const routes = [
  {
    path: "/",
    redirect: "/home",
  },
  {
    path: "/home",
    component: Home,
    name: "home", // name属性的作用:可以通过name属性进行路由跳转
  },
  {
    path: "/about",
    component: About,
    name: "about", // name属性的作用:可以通过name属性进行路由跳转
  }]   
以上就是name属性的使用

-- 2. meta属性: 实际代码
const routes = [
  {
    path: "/",
    redirect: "/home",
  },
  // 懒加载的写法二:
  {
    path: "/home",
    component: Home,
    name: "home", // name属性的作用:可以通过name属性进行路由跳转
    meta:{
      name:'zhangsan',
      age: 18
    }
  },

实际截图

image.png

九.动态路由的使用

九.一.在Vue2.0中使用:

image.png

九.二.在Vue3.0中使用setup函数中使用:

image.png

九.三 匹配多个参数

image.png

十.需求: 当我们随便输入一个路径的时候,没有这个路由 让我们显示一个对应的Page Not Found 该咋怎么做了?

image.png

十一.如果你想拿到用户输入的乱七八糟的东西的话:

image.png

如果在后面多加了一个 星号,它就会自动把路径解析为数组:

image.png

十二.嵌套路由(子路由,在子路由中的path:"tab1",在tab1前面千万不要加 / , 不然组件是出不来的):

1.首先分析: 当你在父组件中点击跳转到某一个子组件中,然后子组件下面还有子路由,这种就叫嵌套路由

2.如下是嵌套路由的一个展示图:

image.png

3.声明嵌套路由的规则:

image.png

4. 嵌套路由的整个代码实现过程如下:

image.png

5.子路由重定向redirect

const router = new VueRouter({
  // routes是一个数组,作用: 定义"hash地址" 与 "组件"之间的对应关系
  routes: [
    // {path:'展示的路由地址', component: "要展示的组件"}
    // 当用户访问 / 时候,通过 redirect 属性跳转到 /home 对应的路由规则
    { path: "/", redirect: "/home" },
    { path: "/home", component: Home },
    { path: "/move", component: Move },
    {
      path: "/about",
      component: About,
      redirect: "/about/tab1", // 这个重定向可以
      children: [
        // { path: "", redirect: "tab1" }, // 这个重定向也可以
        {
          path: "tab1", // tab1 前面千万不要加 /
          component: Tab1,
        },
        {
          path: "tab2", // tab2 前面千万不要加 /
          component: Tab2,
        },
      ],
    },
  ],
});

PS: 这个我在Vue2.0中写过很多次了....不过多记载了

十三. 一 代码实现的页面跳转在Vue2.0中实现跳转-- methods中跳转

image.png

十三. 二 代码实现的页面跳转在Vue3.0中实现跳转 setup中跳转

image.png

PS: 同样的在setup中可以使用对象的方式进行跳转

image.png

十四.query方式的参数

image.png

十五.替换当前的位置

使用push的特点是压入一个新的页面，那么在用户点击返回时，上一个页面还可以回退，但是如果我们希望当前
页面是一个替换操作，那么可以使用replace：

image.png

十六.页面的前进后退

image.png

十七. router-link的v-slot

在vue-router3.x的时候，router-link有一个tag属性，可以决定router-link到底渲染成什么元素：
  -- 但是在vue-router4.x开始，该属性被移除了；
  -- 而给我们提供了更加具有灵活性的v-slot的方式来定制渲染的内容；

1. v-slot如何使用呢？
      -- 就是在 router-link 标签中包裹你想要的元素,但是记住:这个地方的所呈现的元素都会被a标签所包裹

实际截图

image.png

2. 在router-link中放一个自定组件

实际截图

image.png

3. 如果想让router-link 他其实就是一个a标签, 如果不想a标签显示出来的话,就要添加custom

实际截图

image.png

4. 其次，我们使用v-slot来作用域插槽来获取内部传给我们的值：
    -- href：解析后的 URL(也就是要跳转的路径)；
    -- route：解析后的规范化的route对象；
    -- navigate：触发导航的函数；
    -- isActive：是否处于当前页面的活跃状态；
    -- isExactActive：是否是精准匹配的状态；

使用作用域 v-slot 实际截图,详细书写:

image.png

十八. router-view的v-slot(router-view也提供给我们一个插槽，可以用于 <transition> 和 <keep-alive> 组件来包裹你的路由组件)

十八.一 需求: 现在需要实现整个这个项目中的组件在切换的时候实现动画效果:

image.png

十八.二. 需求:这种每次切换的时候都是重新定位的,我想比如说切换到HomeMessage的时候,再去切换其他路由 回来的时候他还在当前页面,这个时候接可以使用keep-alive

image.png

十九.动态添加路由 (addRoute)

动态添加路由的业务场景,例如:
1. 某些情况下我们可能需要动态的来添加路由
    -- 比如根据用户不同的权限，注册不同的路由；
    -- 这个时候我们可以使用一个方法 addRoute；
    -- 以下就是动态路由的基本使用

image.png

PS: 这个可以根据具体的业务场景来进行组件的显示和隐藏

2. 要是子路由想使用这种动态路由该怎么办呢?
具体实现如下:

image.png

二十.动态路由的删除

1. 删除路由有以下三种方式：
     -- 1.1 方式一：添加一个name相同的路由；

实际截图:

image.png

 -- 1.2 方式二：通过removeRoute方法，传入路由的名称；
  

实际截图

image.png

  -- 1.3 方式三：通过addRoute方法的返回值回调；

实际截图

image.png

二十一.路由的补充:

router.hasRoute()：检查路由是否存在。
router.getRoutes()：获取一个包含所有路由记录的数组。

二十二 路由导航守卫

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。
   -- 全局的前置守卫beforeEach是在导航触发时会被回调的：
   -- 1.它有两个参数：
   -- to：即将进入的路由Route对象；to: 要跳过去的路由对象(例如要跳转到b路由),
   -- from：即将离开的路由Route对象；from: 准备从当前要(当前a路由)离开的路由
   
   -- 2. 它有返回值：
   -- return false：取消当前导航(也就是说你点击路由跳转,他哪都不去了)；当你不希望路由跳转的话,你可以使用return false,这种的话路由就跳转不了了
   -- return undefined不返回或者undefined：进行默认导航(就是说他该去哪还是去哪里,这种就叫做默认导航)；

实际截图:

image.png

   -- 3. 返回一个路由地址
   -- 可以是一个string类型的路径；
   -- 可以是一个对象，对象中包含path、query、params等信息；
   
   -- 4. 可选的第三个参数：next
   -- 在Vue2中我们是通过next函数来决定如何进行跳转的；
   -- 但是在Vue3中我们是通过返回值来控制的，不再推荐使用next函数，这是因为开发中很容易调用多次next；

实际截图

image.png

二十三.其他导航守卫

1. Vue还提供了很多的其他守卫函数，目的都是在某一个时刻给予我们回调，让我们可以更好的控制程序的流程或者功能：
 -- https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html

2. 来看一下完整的导航解析流程： 导航被触发。
  -- 在失活的组件里调用 beforeRouteLeave 守卫。
  -- 调用全局的 beforeEach 守卫。
  -- 在重用的组件里调用 beforeRouteUpdate 守卫(2.2+)。 
  -- 在路由配置里调用 beforeEnter。 
  -- 解析异步路由组件。
  -- 在被激活的组件里调用 beforeRouteEnter。 
  -- 调用全局的 beforeResolve 守卫(2.5+)。 
  -- 导航被确认。
  -- 调用全局的 afterEach 钩子。
  -- 触发 DOM 更新。
  -- 调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。