Vue-router 4，你真的熟练吗？

时间：2022-07-05 23:06:46

Vue-router 4，你真的熟练吗？

虽然 vue-router 4 大多数 API 保持不变，但是在 vue3 中以插件形式存在，所以在使用时有一定的变化。接下来就学习学习它是如何使用的。

一、安装并创建实例

安装最新版本的 vue-router

  1. npm install vue-router@4
  2.  
  3. 或
  4.  
  5. yarn add vue-router@4

安装完成之后，可以在 package.json 文件查看vue-router的版本

  1. "dependencies": {
  2. "vue": "^3.2.16",
  3. "vue-router": "4"
  4. },

新建 router 文件夹，新建 index.js文件：

  1. import { createRouter,createWebHashHistory } from "vue-router";
  2.  
  3. const routes = [
  4. {
  5. path:'',
  6. component:()=>import("../views/login/index.vue")
  7. },
  8. {
  9. path:'/home',
  10. component:()=>import("../views/home/index.vue")
  11. }
  12. ]
  13.  
  14. const router = createRouter({
  15. history:createWebHashHistory('/'),
  16. routes
  17. })
  18.  
  19. export default router

然后在main.js 中引入 router 。

  1. import { createApp } from 'vue'
  2. import App from './App.vue'
  3. import router from "./router/index"
  4.  
  5. const app = createApp(App)
  6. app.use(router)
  7. app.mount('#app')

注意：之前 component 引入组件的时候，后边可以省略 .vue 后缀，但在 vue-router 4这不能省略后缀，否则就报错了。

二、vue-router4 新特性

2.1、动态路由

addRoute 动态添加路由时，有两种情况，分别为：

  1. //动态添加路由--默认添加到根
  2. router.addRoute({
  3. path:'/my',
  4. name:'my',
  5. component:()=>import("../views/my/index.vue")
  6. })
  7.  
  8. //动态添加子路由
  9. router.addRoute('my',{
  10. path:'/info',
  11. component:()=>import("../views/my/info.vue")
  12. })

添加子路由时，第一个属性值是父级路由的 name 属性值。

2.2、与 composition 组合

在 事件中获取 router ，进行路由跳转等操作。

  2.  
  4. import { useRouter } from "vue-router"
  5. export default {
  6. setup(){
  7. const router = useRouter()
  8. return{
  9. backToHome(){
  10. router.push("/")
  11. },
  12. }
  13. }
  14. }

通过 useRouter 获取到路由之后再进行操作。也可以对当前路由route进行操作。以下是监听route.query的案例：

  2.  
  4. import { useRouter,useRoute } from "vue-router"
  5. import { watch } from "@vue/runtime-core"
  6. export default {
  7. setup(){
  8. const route = useRoute()
  9. //route时响应式对象，可监控变化
  10. watch(()=>route.query,query=>{
  11. console.log('最新的',query)
  12. })
  13. }
  14. }

三、导航守卫

导航守卫主要用来通过跳转或取消的方式守卫导航，有很多种方式植入路由导航中：全局的、单个路由独享的或者组件级的。

3.1、全局守卫

  1. router.beforeEach((to,from,next)=>{
  2. console.log('全局前置守卫');
  3. })
  4. router.afterEach((to,from)=>{
  5. console.log('全局后置钩子');
  6. })

与之前的使用都一样，没有任何变化。

3.2、路由独享守卫

  1. router.addRoute({
  2. path:'/my',
  3. name:'my',
  4. component:()=>import("../views/my/index.vue"),
  5. beforeEnter:(to,from)=>{
  6. console.log('路由独享守卫');
  7. }
  8. })

3.3、组件内的守卫

组件内的守卫与之前使用不同，vue-router4中，需要从vue-router内引入需要的插件。

  2. import { onBeforeRouteLeave } from "vue-router"
  3. export default {
  4. setup(){
  5. onnBeforeRouteLeave((to,from)=>{
  6. const answer = window.confirm('是否确认离开')
  7. if(answer){
  8. console.log('不离开');
  9. return false
  10. }
  11. })
  12. }
  13. }

四、vue-router4 发生破坏性变化

4.1、实例创建方式

  1. //以前创建方式
  2. const router = new VueRouter({
  3.  
  4. })
  5. new Vue({
  6. router,
  7. render:h=>h(App)
  8. }).$mount("#app")
  9.  
  10. //vue-router4创建方式
  11. import { createRouter } from "vue-router"
  12. const router = createRouter({
  13.  
  14. })
  15. createApp(App).use(router).mount("#app")

4.2、模式声明方式改变

  1. //之前
  2. const router = new VueRouter({
  3. mode:"hash"
  4. })
  5.  
  6. //新的
  7. import { createRouter, createWebHashHistory } from "vue-router"
  8. const router = createRouter({
  9. history:createWebHashHistory()
  10. })

之前的mode替换成了 history ，它的选项变化分别为：

  • history -> createWebHistory
  • hash -> createWebHashHistory
  • abstract -> createMemoryHistory

4.3、base属性被合并

base 选项被移至 createWebHistory 中。

  1. //之前
  2. const router = new VueRouter({
  3. base:"/"
  4. })
  5.  
  6. //新的
  7. import { createRouter, createWebHashHistory } from "vue-router"
  8. const router = createRouter({
  9. history:createWebHashHistory('/')
  10. })

4.4、通配符 * 被取消

  1. //之前
  2. {
  3. path:'*',
  4. component:()=>import("../components/NotFound.vue")
  5. }
  6.  
  7. //vue-router 4
  8. {
  9. path:'/:pathMatch(.*)*',
  10. component:()=>import("../components/NotFound.vue")
  11. }
  12. //是一个正则表达式

4.5、isReady() 替代 onReady

  1. //之前
  2. router.onReady(onSuccess,onError)//成功和失败回调
  3.  
  4. //vue-router 4
  5. router.isReady().then(()=>{
  6. //成功
  7. }).catch(err=>{
  8. //失败
  9. })

4.6、scrollBehavior 变化

  1. const router = createRouter({
  2. scrollBehavior(to, from, savedPosition) {
  3. // 始终滚动到顶部
  4. return { top: 0, left:0 }
  5. },
  6. })
  7. //之前使用的{ x:0, y:0 } 替换成了 { top: 0, left:0 }

4.7、keep-alive 和 transition 必须用在 router-view 内部

  1. //之前
  3. view />
  4.  
  5.  
  6. //vue-router 4
  7. view v-slot="{component}">
  9. is="component" />
  10.  
  11. view>

4.8、router-link 移除了一部分属性

移除 append 属性

  1. //之前
  2. to="child" append >跳转
  3.  
  4. //vue-router 4
  5. to="append( $route.path , 'child' )" append >跳转

tag 被移除

  1. //之前
  2. to="/" tag="span">跳转
  3.  
  4. //vue-router 4
  5. to="/" custom>
  6. 跳转
  7.  

event 被移除

4.9、route 的 parent 属性被移除

4.10、pathToRegexpOptions选项被移除，其他内容替换

4.11、routes选项是必填项

4.12、跳转不存在的命名路由报错

之前跳转到不存在的路由，页面是空的，会重定向根路径，这是不合理的，所以vue3报错了。

4.13、缺少必填参数会抛出异常

4.14、命名子路由如果 path 为空的时候，不再追加 /

之前生成的 url 会自动追加一个 / ，如："/dash/"。副作用：给设置了 redirect 选项的子路由带来副作用。

原文链接：https://www.toutiao.com/a7026254941539156517/

标签：

相关文章