虽然 vue-router 4 大多数 API 保持不变,但是在 vue3 中以插件形式存在,所以在使用时有一定的变化。接下来就学习学习它是如何使用的。
安装最新版本的 vue-router
npm install vue-router@4
或
yarn add vue-router@4
安装完成之后,可以在 package.json 文件查看vue-router的版本
"dependencies": {
"vue": "^3.2.16",
"vue-router": "4"
},
新建 router 文件夹,新建 index.js文件:
import { createRouter,createWebHashHistory } from "vue-router";
const routes =[
{
path:'',
component:()=>import("../views/login/index.vue")
},
{
path:'/home',
component:()=>import("../views/home/index.vue")
}
]
const router =createRouter({
history:createWebHashHistory('/'),
routes
})
export default router
然后在main.js 中引入 router 。
import { createApp } from 'vue'import App from './App.vue'import router from "./router/index"const app =createApp(App)
app.use(router)
app.mount('#app')
注意:之前 component 引入组件的时候,后边可以省略 .vue 后缀,但在 vue-router 4这不能省略后缀,否则就报错了。
addRoute 动态添加路由时,有两种情况,分别为:
//动态添加路由--默认添加到根
router.addRoute({
path:'/my',
name:'my',
component:()=>import("../views/my/index.vue")
})
//动态添加子路由
router.addRoute('my',{
path:'/info',
component:()=>import("../views/my/info.vue")
})
添加子路由时,第一个属性值是父级路由的 name 属性值。
在 事件中获取 router ,进行路由跳转等操作。
<template>
<button @click="backToHome">跳转到首页</button>
</template>
<script>import { useRouter } from "vue-router"export default{
setup(){
const router =useRouter()
return{
backToHome(){
router.push("/")
},
}
}
}
</script>
通过 useRouter 获取到路由之后再进行操作。也可以对当前路由route进行操作。以下是监听route.query的案例:
<template>
<div>监听路由变化</div>
</template>
<script>import { useRouter,useRoute } from "vue-router"import { watch } from "@vue/runtime-core"export default{
setup(){
const route =useRoute()
//route时响应式对象,可监控变化
watch(()=>route.query,query=>{
console.log('最新的',query)
})
}
}
</script>
导航守卫主要用来通过跳转或取消的方式守卫导航,有很多种方式植入路由导航中:全局的、单个路由独享的或者组件级的。
router.beforeEach((to,from,next)=>{
console.log('全局前置守卫');
})
router.afterEach((to,from)=>{
console.log('全局后置钩子');
})
与之前的使用都一样,没有任何变化。
router.addRoute({
path:'/my',
name:'my',
component:()=>import("../views/my/index.vue"),
beforeEnter:(to,from)=>{
console.log('路由独享守卫');
}
})
组件内的守卫与之前使用不同,vue-router4中,需要从vue-router内引入需要的插件。
<script>import { onBeforeRouteLeave } from "vue-router"export default{
setup(){
onnBeforeRouteLeave((to,from)=>{
const answer = window.confirm('是否确认离开')
if(answer){
console.log('不离开');
return false}
})
}
}
</script>
//以前创建方式
const router = newVueRouter({
})
newVue({
router,
render:h=>h(App)
}).$mount("#app")
//vue-router4创建方式
import { createRouter } from "vue-router"const router =createRouter({
})
createApp(App).use(router).mount("#app")
//之前
const router = newVueRouter({
mode:"hash"})
//新的
import { createRouter, createWebHashHistory } from "vue-router"const router =createRouter({
history:createWebHashHistory()
})
之前的mode替换成了 history ,它的选项变化分别为:
base 选项被移至 createWebHistory 中。
//之前
const router = newVueRouter({
base:"/"})
//新的
import { createRouter, createWebHashHistory } from "vue-router"const router =createRouter({
history:createWebHashHistory('/')
})
//之前
{
path:'*',
component:()=>import("../components/NotFound.vue")
}
//vue-router 4
{
path:'/:pathMatch(.*)*',
component:()=>import("../components/NotFound.vue")
}
//是一个正则表达式
//之前
router.onReady(onSuccess,onError)//成功和失败回调
//vue-router 4
router.isReady().then(()=>{
//成功
}).catch(err=>{
//失败
})
const router =createRouter({
scrollBehavior(to, from, savedPosition) {
//始终滚动到顶部
return { top: 0, left:0}
},
})
//之前使用的{ x:0, y:0 } 替换成了 { top: 0, left:0 }
//之前
<keep-alive>
<router-view />
</keep-alive>
//vue-router 4
<router-view v-slot="{component}">
<keep-alive>
<component :is="component" />
</keep-alive>
</router-view>
//之前
<router-link to="child" append >跳转<router-link>
//vue-router 4
<router-link :to="append( $route.path , 'child' )" append >跳转<router-link>
//之前
<router-link to="/" tag="span">跳转</router-link>
//vue-router 4
<router-link to="/" custom>
<span>跳转</span>
</router-link>
之前跳转到不存在的路由,页面是空的,会重定向根路径,这是不合理的,所以vue3报错了。
之前生成的 url 会自动追加一个 / ,如:"/dash/"。副作用:给设置了 redirect 选项的子路由带来副作用。
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://www.cnblogs.com/web-learn/p/15522723.html
内容来源于网络,如有侵权,请联系作者删除!