路由vue-router，安装，含义，三种模式

路由：v-router，代码没几行，道理一大堆

一 安装步骤

安装：npm i vue-router，在vue3里可以直接装

vue2里得在package.json的dependencies里加一句话

“vue-router":"^3.4.9"

二 vue的使用

vue-router得导入一下，当做插件用

import VueRouter from "vue-router"

Vue.use(VueRouter)

const router = new VueRouter({

routes：[

{path:"",name :"",component: },



]，

mode：“history"//在这里改模式

})

new Vue({

router

render:h=>h{App}

}).$mount('#app')

看自己所设路由的模式

如果设置的是history的话，在控制台输入location.pathname的方式获取地址；

如果是hash就是location.hash。

二者的地址栏显示方式也有所不同，#/后面的值是hash获取的值，/后面的值是history的值

hash与hsitory的区别：

location.hash与location.pathname的区别，abstract读取的内存中的地址

<RouterView/> 相当于是路由的插槽。

也是一个组件，但不要注册会自动注册。

以上是routerview插件的两种写法，且，基本其他能用到的代码也都是有两种写法，一种是每个单词第一个字母大写，一种就是两个单词用-连接

路由的通俗含义（个人理解）

路由，就是导文件，一个文件用另一个文件，这个文件，用import和export defautlt 对自己或者调用的文件导入导出，把所需要的功能无限的细分成多个文件，.js文件，

引用那个文件，一个引用一个，然后不会刷新浏览器，把一个个功能分成不同的文件，一个功能一个文件，然后调用文件就达到了 使用功能的目的

无限细分，再多个调用，把一个功能打包放到一个js文件里，哪里需要用到次功能了直接import调用即可

v-router的三种模式

一般有两种模式

hash 模式:

后面的 hash 值的变化，浏览器既不会向服务器发出请求，浏览器也不会刷新，每次 hash 值的变化会触发 hashchange 事件,

history 模式:

利用了 HTML5 中新增的 pushState()和 replaceState()方法。这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的URL，但浏览器不会立即向后端发送请求。

abstract模式：

Abstract多用于手机

abstrqct:路由从内存中获取路径，改变路径也,只是改动内存中的值，这种模式通常应用到非浏览器环境中。