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 添加子路由
:
需要判断是否有权限才能继续访问的例子:
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中的/会被解码