vue3基础 移除，mitt，vue-router4

vue3中移除

keycode作为 v-on修饰符被移除

键盘的键码，可读性太差，所以被移除
只能使用具体的别名 比如：回车enter

$on，$off和$once被移除
上述的3个方法被认为不应该由vue提供，所以被移除

mitt

可以用第三方库实现
官方推荐的是一个叫mitt的库

安装mitt ：
npm i mitt -S
事件的派发和监听（依赖mitt）：

mitt会返回一个 工厂函数
获取这个工厂函数

vue-router 4

router-view标签

router-view标签使用方式与以前一样

设置history写法及区别：

createMemoryHistory 内存型，用于服务端渲染的时候，在后台服务器使用的
createWebHistory 就是以前的history模式
createHashHistory 以前的hash模式

组件快速写法：

会变为：

自定义组件的路由写法

创建router实例，createApp中直接use router实例

以后routes中的对象多的时候还可以单独抽离出去

动态路由：

在某些情况下，一个页面的path路径可能是不确定的，比如我们进入用户界面时，希望是如下路径

/user/aaa或/user/bbb

除了有前面的/user之外，后面还跟上了用户ID

这种path和Component匹配关系，我们称之为动态路由（也是路由传递数据的一种方式）

router下index.js配置路由

{
    path：'/user/:id',
    component: User
}

进入user页面点击路径

<template>
  <div id="detail">
    <router-link :to="'/user/'+userId"></router-link>
  </div>
</template>
<script>
  export default {
    name: 'detail',
    data() {
    	return {
    		userId: 'zgangdsna'
    	}
    }
  }

简单的例子：

给动态路由about 添加子路由：

需要判断是否有权限才能继续访问的例子：

http://www.manongjc.com/detail/29-ayegozigdhbiutg.html

router回退的方法

先获取router路由器的实例：

useRouter


route是 响应式 对象，可监控变化

route.query

route.query代表路由？后的参数

例子：
？foo=bar

路由守卫（全局）

answer是confirm方法的返回值，点确定是true，取消是false

router用name跳转

NavLink是自定义的组件（不是react中的NavLink）
有isRef 代表就是 响应式 的

router-link 和 router-view（也叫路由占位符） 使用

用户点击 页面的 路由链接router-link，点击的一瞬间，就会修改浏览器地址栏中的Hash地址；

当 hash 地址被修改以后，会立即被 vue-router 监听到，然后进行 路由规则的 匹配；最终，找到 要显示的组件；

当 路由规则匹配成功以后，就找到了要显示的组件，然后把这个组件，替换到页面指定的路由容器router-view 中

简单来说,router-view就是渲染视图的

例子：
需要切换不同组件页的页面 ，在自己需要的位置 添加 router-view组件

Home.vue

<template>
<!--头部区域-->
    <el-header>
      <div>
        <img class="shop" src="../assets/img/shop.png" alt="">
        <span>电商后台管理系统</span>
      </div>
      <el-button type="info" @click="logout">退出</el-button>
    </el-header>
    <el-container>
<!--侧边栏-->
    <!--这里为了好理解所以做了一下简化，意思就是点击侧边栏不同选项进行路由跳转-->
    <roter-link :to="/roles"></router-link><!--角色列表-->
    <roter-link :to="/rights"></router-link><!--权限列表-->
<!--路由占位符-->
    <router-view></router-view>
</template>

角色列表对应的路由为/roles，权限列表对应的路由为/rights。
添加router-view组件后对路由进行配置，下面是路由的配置

index.js

{
      path:'/home',
      component:Home,
      // 重定向到角色列表
      redirect:'/roles',
      children:[
        {
          path:'/rights',
          component:Rights
        },
        {
          path:'/roles',
          component:Roles
        } 
      ]
    }

获取vue-router中的所有描述信息｛RouterLink｝

…RouterLink展开RouterLink
自定义NavLink组件内部写法

获取RouterLink内部属性和方法

用useLink方法

把需要使用的 route，isActive，navigate通过return暴露出去

从NavLink组件内部写法开始，都是在route的name跳转之前的工作

创建实例方式

使用createWebHistory

效果：
没有/#/

这种方式 好处：便于摇树优化掉一些没有使用到的history，同时 在一些比较高级的原生解决方案里 比较方便去做一些自定义

设置前缀的url，在vue2里是设置base


效果：

通配符*

结尾的* 表示 这个参数未来是必填项而且是重复的

pathMatch

pathMatch匹配的就是路由后 /隔开的参数

直接跳转至not-found页面的话，不用加.href
加.href可以获得这个404页面的地址

vue-router4中通配符*被移除

vue-router4 移除星号全匹配（移除了path:'*'的匹配）
把*号修改下，改成“/:pathMatch(.*)*”

https://blog.csdn.net/weixin_29335033/article/details/114474123

isReady（）替代 onReady（）

router.onReady（）或者router.isReady（）是为了让动态加载的路由加载完
用于底层服务端渲染

vue-router4中所有的路由的导航都是异步的，所以要等它就绪的话一定要使用isReady（）

以前会写成router.onReady（onSuccess，onError）

现在会写成router.isReady（）.then（onSuccess）.catch（onError）

因为现在isReady方法返回的是一个promise

以前VueRouter类中的onReady(),push()等方法（现在的isReady()等方法）只是一个代理，实际是调用的具体history对象的对应方法，在init()方法中初始化时，也是根据history对象具体的类别执行不同的操作

scrollBehavior变化

作用是定位位置信息
写法：

上面写的是跳转页面后，返回页面，滚动条位置不变，不会回到页面顶部

前提是页面上需要有滚动条，并滚动过

加个滚条最简单的方法就是给页面或最大的div加个高度

变化：
以前是x和y，现在变为top和left

keep-alive和transition的变化

以前的keep-alive要写在router-view的外部

v-slot以前用于内容分发，现在可直接用于调用组件
vue-router4现在 在router-view中把它加了进去，来配合keep-alive使用

vue-router4写法：

上图中Component是同一个，component标签+：is的写法是 动态组件 的写法

globalProperties

类型：[key: string]: any
默认：undefined

添加一个可以在应用的任何组件实例中访问的全局 property。组件的 property 在命名冲突具有优先权。

globalProperties上添加append，可全局使用

vue3.0 setup 中使用 globalProperties
// 2.0
Vue.prototype.$http = () => {}

// 3.0
const app = Vue.createApp({})
app.config.globalProperties.$http = () => {}

最常用的场景，在页面渲染前，通过http请求获取需要显示的数据。

在2.0，通过在vue原型上添加$http 属性，可以在组件实例中通过this.$http使用；

//2.0
 created(){
      this.$http.get('/getData').then().catch(err => {console.log(err)})
}

而在3.0的settup中是没有this的。

import { getCurrentInstance,onBeforeMount} from 'vue';
setup (props,context) {
　　　　const {appContext: {config: {globalProperties: global}}} = getCurrentInstance();//3.0.11
　　　  onBeforeMount(()=>{
　　　　　　global.$http.get('/getData').then().catch(err => {console.log(err)}) });
　　　　　　....... 
}

router-link移除了很多属性

globalProperties上添加append，可全局使用

需要判断path的值是否带有/

tag/event

vue2写法：
tag 改变渲染标签

<router-link to="" tag="div">router-link</router-link>

vue3写法:
加上custom，代表我要自定义，这样默认的router name就不会变成a标签

exact：现在完全匹配逻辑简化了

mixins中的路由守卫将被忽略

match方法被移除，使用reslove代替

移除router.getMatchedCompents（）

常用于服务端渲染的方法

关心当前哪些组件获得了匹配，处理这个组件内部里面的异步的api的调用，所以我们可能会得到这些组件

替代方法：

router.currentRoute.value.matched

包括首屏导航在内所有导航均为异步

导致我们在一些特殊场景下需要一些特殊的处理

route的parent属性被移除

const partent=this.$route.matched[this.$route.matched.length-2]

-1就是当前
-2就是当前的上一级/父级

pathToRegexpOptions
pathToRegexpOptions选项被删除
pathToRegexpOptions被strict取代
caseSensitive被sensitive取代

使用：

使用history.state
必须在history模式
是底层操作

如果一定要使用底层操作，官方建议使用router.push（url）和 history.replaceSate这个 合并历史状态和现在状态 的方法

routes选项是必填项

routes一般为静态路由

createRouter({routes:[]})

跳转不存在命名路由报错

router.push({name:'dashboad'})

缺少必填会抛出异常

命名子路由（children）如果path为空的时候不再追加/
以前会自动生成/

副作用：

上图的方法匹配不到 /dashboard/home
只会走到/home
哪怕在/dashboard后面手动补/，也找不到，貌似会自动删掉/

解决方法：
把路径写全

不如 强制写全重定向地址

可参考：https://blog.csdn.net/weixin_45730243/article/details/116650934

$route属性编码行为

params中的/会被解码