二、vue3学习笔记：路由高级

客官°小女子只卖身不卖艺 2024-04-18 08:41 164阅读 0赞

文章目录

    • 一、路由组件传参：
        1. 布尔模式
        1. 普通页面模式
        1. 函数模式
    • 二、html5 history模式
    • 三、导航守卫
      • 完整的导航解析流程：
        1. 全局守卫
        • 1）router.beforeEach : 全局前置守卫
        • 2）后置钩子
        1. 专供于页面的守卫
        • 1）beforeRouteEnter
        • 2） 页面后置钩子：beforeRouteLeave
    • 四、路由源信息
    • 五、路由的切换动效
        1. 所有页面动效
        1. 单独页面动效

一、路由组件传参：

1. 布尔模式

  • /view/argu.vue

  • /router/router.js

    { 

    1. // 动态路由参数，不管参数是什么，匹配到的都是这个路由对象
    2. path: '/argu/:name',
    3. name: 'argu',
    4. component: () => import('@/views/argu.vue'),
    5. // true表示里面的参数，它会使用router的params作为组建的属性，此时params中
    6. // 有一个name('/argu/:name'),它就会把name传入argu的属性里
    7. props: true

    },

2. 普通页面模式

  • /view/About.vue

  • /router/router.js

    { 

    1. path: '/about',
    2. name: 'about',
    3. // route level code-splitting
    4. // this generates a separate chunk (about.[hash].js) for this route
    5. // which is lazy-loaded when the route is visited.
    6. // 懒加载
    7. component: () => import(/* webpackChunkName: "about" */ '@/views/About.vue'),
    8. props: { 
    9.   food: 'banana'
    10. }

    }

3. 函数模式

  • router/router.js

    { 

    1. path: '/',
    2. // 定义别名
    3. alias: '/home_page',
    4. name: 'home',
    5. component: Home,
    6. // 函数模式
    7. props: router => { 
    9. }

    }

  • /views/Home.vue

网址 ： http://localhost:8080/\#/?food=banana

  • 结果如图：
    在这里插入图片描述

二、html5 history模式

  • 使用history的一些api来做无刷新页面的一些跳转，没有#
    如果使用history模式，所有匹配不到url的静态资源都会指向index.html
    应该在router.js里面增加一个匹配所有路径的路由

  • router/index.js

    import Vue from ‘vue’
    import Router from ‘vue-router’
    import routes from ‘./router’

    // Router作为一个插件，需要使用Vue.use()方式将其加载进来
    Vue.use(Router)

    // Router有两个参数：routes和mode
    export default new Router({
    // 模式
    // 在url的# 号后面作变化，页面是不会刷新的
    // mode: ‘hash’,
    / 使用history的一些api来做无刷新页面的一些跳转，没有# 如果使用history模式，所有匹配不到url的静态资源都会指向index.html 应该在router.js里面增加一个匹配所有路径的路由 /
    mode: ‘history’,
    // 路由
    routes: routes
    })

  • router/router.js

    // 根据优先级原则，定义在越上面的，优先级越高,因此，应该定义在最下面
    {
    path: ‘*’,
    component: () => import(‘@/views/error_404.vue’)
    }

  • views/error_404.vue

三、导航守卫

完整的导航解析流程：

  1. 1.导航被触发
  2. 2.在失活的组件（即将离开的页面组件）里调用离开守卫 beforeRouteLeave
  3. 3.调用全局的前置守卫 beforeEach
  4. 4.在重用的组件里调用 beforeRouteUpdate
  5. 5.调用路由独享
  6. 6.解析异步路由组件
  7. 7.在被激活的组件（即将进入的页面组件）里调用 beforeRouteEnter
  8. 8.调用全局解析守卫 beforeResolve
  9. 9.导航被确认
  10. 10.调用全局的后置守卫 afterEach
  11. 11.触发DOM更新
  12. 12.用创建好的实例调用beforeRouterEnter守卫里传给next的回调函数

1. 全局守卫

1）router.beforeEach : 全局前置守卫

  • router/router.js

    { 

    1. path: '/login',
    2. name: 'login',
    3. component: () => import('@/views/login.vue')

    },

  • router/index.js

    import Vue from ‘vue’
    import Router from ‘vue-router’
    import routes from ‘./router’

    // Router作为一个插件，需要使用Vue.use()方式将其加载进来
    Vue.use(Router)

    // 拎出来单独定义
    const router = new Router({
    routes
    })

    const HAS_LOGINED = true

    // 注册一个全局前置守卫
    // to,from,next都是路由对象，to代表即将跳转的页面，from是即将离开的路由对象，next是一个函数
    router.beforeEach((to, from, next) => {
    if (to.name !== ‘login’) { 

    1. // 如果已经登陆则跳转
    2. if (HAS_LOGINED) next()
    3. // 如果为登陆，则先登录，里面可以传入name对象，或path，或路径
    4. else next({  name: 'login' })

    } else { 

    1. if (HAS_LOGINED) next({  name: 'home' })
    2. else next()

    }
    })

    // Router有两个参数：routes和mode
    // 模式
    // 在url的# 号后面作变化，页面是不会刷新的
    // mode: ‘hash’,
    / 使用history的一些api来做无刷新页面的一些跳转，没有# 如果使用history模式，所有匹配不到url的静态资源都会指向index.html 应该在router.js里面增加一个匹配所有路径的路由 /
    // mode: ‘history’,
    // 路由
    export default router

  • views/login.vue

2）后置钩子

  • router/index.js

    // 后置钩子,在路由跳转之后进行一些操作，它不能对跳转的页面进行操作，控制，它只是能够处理一些简单逻辑
    router.afterEach((to, from) => {
    // logining = false
    })

2. 专供于页面的守卫

1）beforeRouteEnter

  • views/Home.vue

  • beforeRouteEnter : 组件在确认前被调用

    import Home from ‘@/views/Home’

    export default [
    { 

    1. path: '/',
    2. // 定义别名
    3. alias: '/home_page',
    4. name: 'home',
    5. component: Home,
    6. // 函数模式 route为参数，代表当前路由对象 如果想要返回一个对象，则以这种方式填写：({})
    7. props: route => ({ 
    8.   food: route.query.food
    9. }),
    10. // 专供于home页的守卫
    11. // to,from,next都是路由对象，to代表即将跳转的页面，from是即将离开的路由对象，next是一个函数
    12. beforeEnter: (to, from, next) => { 
    13.   if (from.name === 'about') alert('这是从about来的')
    14.   else alert('这不是从about来的')
    15.   // 注意调用next()跳转页面
    16.   next()
    17. }

    },
    { 

    1. path: '/login',
    2. name: 'login',
    3. component: () => import('@/views/login.vue')

    },
    { 

    1. path: '/about',
    2. name: 'about',
    3. // route level code-splitting
    4. // this generates a separate chunk (about.[hash].js) for this route
    5. // which is lazy-loaded when the route is visited.
    6. // 懒加载
    7. component: () => import(/* webpackChunkName: "about" */ '@/views/About.vue'),
    8. props: { 
    9.   food: 'banana'
    10. }

    },
    { 

    1. // 动态路由参数，不管参数是什么，匹配到的都是这个路由对象
    2. path: '/argu/:name',
    3. name: 'argu',
    4. // 参数
    5. params: { 
    6.   name: 'lison'
    7. },
    8. component: () => import('@/views/argu.vue'),
    9. // true表示里面的参数，它会使用router的params作为组建的属性，此时params中
    10. // 有一个name('/argu/:name'),它就会把name传入argu的属性里
    11. props: true

    },
    // 嵌套路由
    { 

    1. path: '/parent',
    2. name: 'parent',
    3. component: () => import('@/views/parent.vue'),
    4. // children代表着嵌套在parent里面的子集页面，路径不用写斜线，作为子集会自动补全
    5. children: [
    6.   { 
    7.     path: 'child',
    8.     component: () => import('@/views/child.vue')
    9.   }
    10. ]

    },
    { 

    1. path: '/named_view',
    2. // 注意有个s
    3. components: { 
    4.   // 没有命名则加载default
    5.   default: () => import('@/views/child.vue'),
    6.   email: () => import('@/views/email.vue'),
    7.   tel: () => import('@/views/tel.vue')
    8. }

    },
    // 重定向路由
    { 

    1. path: '/main',
    2. // redirect: '/'
    3. // redirect: to => { 
    4. // console.log(to)
    5. // }
    6. // redirect: 'home'
    7. // redirect: to => { 
    8. // return { 
    9. // name: 'home'
    10. // }
    11. // }
    12. redirect: to => { 
    13.   return '/'
    14. }

    },
    // 根据优先级原则，定义在越上面的，优先级越高，因此，应该定义在最下面
    { 

    1. path: '*',
    2. component: () => import('@/views/error_404.vue')

    }
    ]

  • views/Home.vue : 打印出当前所有实例

    // 组件在确认前被调用

    1. beforeRouteEnter(to, from, next) { 
    2.   next(vm => { 
    3.     // 打印出当前所有实例
    4.     console.log(vm);
    5.   })
    6.   // 跳转至下一页
    7.   next()
    8. },

2） 页面后置钩子：beforeRouteLeave

  • src/views/Home.vue :页面后置钩子

    // 页面后置钩子
    beforeRouteLeave(to, from, next) {
    const leave = confirm(‘您确定要离开吗？’)
    if (leave) next()
    else next(false)
    },

  • src/views/argu.vue : 在路由发生变化，组件被复用的情况时被调用

四、路由源信息

  meta里面可以存放一些需要定义的信息，比如页面是否需要一些权限，或者一些其他信息，然后在路由前置守卫里做一些处理。

  • 以下是一个更改about的title为“关于”，其他页面为“admin”的例子：

  • src/lib/util.js

    export const setTitle = (title) => {
    window.document.title = title || ‘admin’
    }

  • src/router/router.js

    { 

    1. path: '/about',
    2. name: 'about',
    3. // route level code-splitting
    4. // this generates a separate chunk (about.[hash].js) for this route
    5. // which is lazy-loaded when the route is visited.
    6. // 懒加载
    7. component: () => import(/* webpackChunkName: "about" */ '@/views/About.vue'),
    8. props: { 
    9.   food: 'banana'
    10. },
    11. meta: { 
    12.   title: '关于'
    13. }

    },

  • src/router/index.js

    // 注册一个全局前置守卫
    // to,from,next都是路由对象，to代表即将跳转的页面，from是即将离开的路由对象，next是一个函数
    router.beforeEach((to, from, next) => {
    to.meta && setTitle(to.meta.title)
    if (to.name !== ‘login’) { 

    1. // 如果已经登陆则跳转
    2. if (HAS_LOGINED) next()
    3. // 如果为登陆，则先登录，里面可以传入name对象，或path，或路径
    4. else next({  name: 'login' })

    } else { 

    1. if (HAS_LOGINED) next({  name: 'home' })
    2. else next()

    }
    })

五、路由的切换动效

页面的切换就是一个组件注销，一个组件加载，在vue基础里面有提到组件的过渡，能够为一个组件的显示
和隐藏都设置一个过度效果，同样也能为一个页面设置一个过渡效果。多个组件使用过渡效果需要使用
<transition-group></transition-group>（只需要包住一个视图渲染组件则只需要）包住视图渲染组件<router-view/>

1. 所有页面动效

  • src/App.vue

发表评论

表情：
评论列表 （有 0 条评论，164人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Vue学习：路由

    2. 路由 2.1 前端路由的发展历程 2.1.1 认识前端路由 路由其实是网络工程中的一个术语： 在架构一个网络时，非常重要的两个设备就是路由器和交换机

    忘是亡心i忘是亡心i/ 0 赞/ 183 阅读