Vue-router 学习之路

一、vue-router 的作用

        实现单页面应用（指不需要打开其他页面跳转

二、vue-router 的实际用法

1.环境vue3

首先：搭建好vue3

1. 这里使用的是 vue-cil （ 这里就不演示了，romki 上个连接 介绍 | Vue CLI
2. vue create vue3-router-test 

   

  安装 vue-router

npm install vue-router@4

 （记住cd 你的项目 再执行安装

2. 在vue3 中加入vue-router

在src 中 创建 router/index.js

再对index.js 进行编辑 如下代码：

import {createRouter, createWebHistory} from 'vue-router'
//createRouter 用来创建路由
//createWebHistory 路由模式 


import HelloWorld from '@/components/HelloWorld'
//导入需要用的组件

const url = [
    { path: '/', component: HelloWorld },
]
//路由 对应的 组件

export const router = createRouter({
    history:createWebHistory(),
    routes:url
})
//将创建好的路由器导出

我们回到main.js 中

import { createApp } from 'vue' //创建vue
import App from './App.vue' //将App 组件导入
import {router}  from '@/router/index' // 导入路由器

const app = createApp(App) //创建app
app.use(router) //app 注入路由器
app.mount('#app') //挂载到 id选择器 'app' 上

启动vue

npm run serve

这样一个简单的路由器就制作好了啦~   可以再评论区留下大家宝贵的建议和问题哦 ~

扩展：这里讲一下路由模式

 

 显然从vue2 迁移到vue3 写法是需要改变的，romki 来给大家分别介绍一下这三类是什么吧~

（更详细的话，需要开一个新的文章介绍

hash —— 即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。
比如这个 URL：http://www.abc.com/#/hello，hash 的值为 #/hello。它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。
history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）
这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。

原文链接：https://blog.csdn.net/lyn1772671980/article/details/80804419

abstract模式

abstract模式是使用一个不依赖于浏览器的浏览历史虚拟管理后端。

根据平台差异可以看出，在 Weex 环境中只支持使用 abstract 模式。 不过，vue-router 自身会对环境做校验，如果发现没有浏览器的 API，vue-router 会自动强制进入 abstract 模式，所以 在使用 vue-router 时只要不写 mode 配置即可，默认会在浏览器环境中使用 hash 模式，在移动端原生环境中使用 abstract 模式。 （当然，你也可以明确指定在所有情况下都使用 abstract 模式）

转载： Vue番外篇 -- vue-router浅析原理_barnett_y的博客-CSDN博客

好啦~大家下期间~

下期预告：关于vue-router 匹配的用法