Vue学习笔记之路由

文章目录

    • 第六章 element-ui(vue2)/element-plus(vue3)
    • 第七章 vue-router
      • 7.1 路由的实现
        • 7.1.1MVC及MVVM架构下的路由
        • 7.1.2 vue路由实现
      • 7.2 延迟加载动态导入(懒加载)
      • 7.3 路由模式解析
      • 7.4 全局变量
      • 7.5 嵌套路由
      • 7.6 重定向和别名
      • 7.7 导航守卫

第六章 element-ui(vue2)/element-plus(vue3)

  • 安装:npm element-plus --save

  • 在main.js中完整引入:

    • import ElementPlus from 'element-plus'引入库
    • import 'element-plus/dist/index.css'引入样式
    • app.use(ElementPlus)app使用
  • 按需导入

    • 安装插件 npm install -D unplugin-vue-components unplugin-auto-import

    • 添加配置:在项目根目录下新建vue.config.js可以在其中进行webpack配置,添加如下代码:

      const AutoImport = require('unplugin-auto-import/webpack')
      const Components = require('unplugin-vue-components/webpack')
      const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
      module.exports = {
          configureWebpack:{
              plugins: [
                  // ...
                  AutoImport({
                      resolvers: [ElementPlusResolver()],
                  }),
                  Components({
                      resolvers: [ElementPlusResolver()],
                  }),
              ],
      
          }
      }
      

第七章 vue-router

7.1 路由的实现

7.1.1MVC及MVVM架构下的路由
  • 后端路由:服务器根据请求的 URL 路径来确定执行哪个控制器或处理函数。
    • 服务器根据预先定义的路由规则对请求的 URL 路径进行匹配,确定要执行的控制器或处理函数。
    • 控制器或处理函数负责处理请求、处理业务逻辑、获取数据等,并生成最终的响应。
    • 响应会返回给客户端,客户端根据响应进行相应的处理。
  • 前端路由:前端路由主要通过监听浏览器 URL 的变化来确定当前渲染哪个视图或组件。
    • 当用户在浏览器中输入 URL 或点击链接时,前端代码会监听浏览器 URL 的变化
    • 根据预定义的路由规则(如 URL 路径与对应的视图或组件的映射关系)来匹配当前的 URL
    • 根据匹配结果,前端代码会选择加载和渲染相应的视图或组件
7.1.2 vue路由实现
  • 安装路由

    Vue学习笔记之路由_第1张图片

  • main.js引入路由功能

    创建路由器实例

    Vue学习笔记之路由_第2张图片

  • 路由注册src->router->index.js

    创建路由映射

    (新建立的页面级组件一般放入src->-views目录下)

    Vue学习笔记之路由_第3张图片

  • 使用v-link指令

    app.vue包含页面级组件

    使用标签

    也可以直接创建链接标签,设置href属性值,点击链接可以实现页面切换

    安装路由时选择历史模式,就可以使用BOM中的历史对象,实现页面的前进和后退

    Vue学习笔记之路由_第4张图片

  • 渲染页面组件

    启动路由

    app根据路由规则加载不同的页面组件

    Vue学习笔记之路由_第5张图片

7.2 延迟加载动态导入(懒加载)

  • (打包后)每个页面有自己的js文件,访问相应页面按需加载相应的js文件,提高效率

  • 在路由设置index.js中进行设置,关键就在于通过函数导入组件

    • 方式一:

      Vue学习笔记之路由_第6张图片

      或者使用箭头函数

      component: ()=>import('../views/AboutView.vue')
      
    • 方式二:

      声明函数变量导入

      import { createRouter, createWebHistory } from 'vue-router'
      const UserView = ()=> import("../views/UserView.vue");
      const routes = [  
        {
          path: '/user',
          name: 'user',
          // component: UserView
          component: UserView
        } 
      ]
      

7.3 路由模式解析

路由模式指用于管理前端页面导航和路由的方式,定义了如何根据不同的URL路径加载不同的组件,并控制页面切换和状态管理,

  • createWebHasHistoryHash哈希模式是VueRouter默认的路由模式,使用URL的哈希部分#来管理路由状态
  • createWebHistotyHistory历史模式使用 HTML5 History API 来管理路由状态,不包含哈希字符。需要服务器配置以支持直接访问 URL。
  • createMemoryHistoryAbstract内存模式将路由状态保存在内存中,不依赖浏览器 URL 或 HTML5 History API。主要用于非浏览器环境或独立于 URL 进行路由管理的情况,如服务器端渲染(SSR)。
import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    // 定义路由配置
    { path: '/home', component: Home },
    { path: '/about', component: About }
  ]
}); 
//使用createWebHistory创建了一个基于History模式的路由历史对象,并将其作为选项传递给createRouter函数

7.4 全局变量

  • 全局变量也就是main.js中的App中的成员属性,所有组件都可以访问的成员

  • app中的全局变量,在子组件中可以直接调用,页面(view)使用插值语法时直接变量名前加 $,在js(model)中访问使用 this.$...$...

    是否需要加上this取决于变量的作用域和定义方式

    1. 如果全局变量是通过Vue实例的**data属性定义**的,那么在子组件中访问时需要使用this关键字
    2. 如果全局变量是在Vue实例外部定义的(例如在Vue实例之前的脚本中),则可以直接在子组件中访问,无需添加this关键字
    //vue实例前的脚本中定义变量
    const app ={
        $emit,
        $route,
        $router
    }
    
    //页面级组件中
    mounted(){
        //打印自己的变量
        console.log(this.msg);
        //打印全局变量
        console.log($route);
        console.log($router);
    }
    
  • $route当前路由,可以获取当前路由的信息(path,参数)

    {{$route.query}}<br>
    {{$route.query.username}}<br>
    {{$route.query.page}}<br>
    {{$route.fullPath}}<br>
    {{$route.path}}<br>
    
  • $router路由器,使用它的方法转向其他的位置,可以带参数跳转

    <button @click="$router.go()">
        个人中心
    button>
    <button @click="$router.back()">
        个人中心
    button>
    <button @click="$router.push('/user')">
        个人中心
    button>
    <button @click="$router.go(-1)">
        返回
    button>
    <button @click="$router.push({path:'/user',query:{username:'ddd',page:'110'}})">
        个人中心
    button>
    

7.5 嵌套路由

  • /传参

      {
        // 这样访问/user需要加“/参数”才会访问到该页面
        path: '/user:id',
        name: 'user',
        // component: UserView
        component: UserView
      },
    
    //页面组件模板可以获取参数
    {{$route.params.id}}
    
  • 选项卡

    • 设置连接
    • 点击链接对一些元素样式发生改变(隐藏/显示)display:none display:block
  • 嵌套路由

    • 路由配置文件index.js,导入子组件,在“父路由”下添加子路由

      //导入
      const MyCollect = ()=>import("../views/user/MyCollection.vue");
      const MyCourse = ()=>import("../views/user/MyCourse.vue");
      const MyOrder = ()=>import("../views/user/MyOrder.vue");
      
      //路由中添加子路由
      {
          path: '/user3',
          name: 'user3',
          // component: UserView
          component: UserView3,
          children:[
            {
              path:'collect',
              name:'collect',
              component:MyCollect,
            },
            {
              path:'order',
              name:'order',
              component:MyOrder,
            },
            {
              path:'course',
              name:'course',
              component:MyCourse,
            }
          ]
        },
      
    • "父"组件中添加链接和

      
      

7.6 重定向和别名

  • 重定向:

    • 在routes配置中完成,要从重定向/a到/b
    • const routes=[{path:'/home',redirect:'/'}]
    • const routes = [{path:'/home',redirect:{name:'homepage'}}]
    • path:'/searchText',redirect:to=>{return {path:'/search',query:{q:to.params.searchText}}},
  • 别名:

    • 别名/as/home表示用户访问url为//home时匹配内容一样
    • const routes = [{path:'/',component:Homepage,alias:'/home'}]
    • alias:['people','list']可以用数组方式起多个别名
    • alias:['/:id','']

7.7 导航守卫

是一组用于在路由导航过程中进行控制和拦截的钩子函数。可以在路由跳转前、跳转后以及跳转出错时执行相应的逻辑,用于对路由进行权限认证、数据预加载、页面切换动画等操作

  • 前置守卫

    • to: Route: 即将要进入的目标路由对象

    • from: Route: 当前导航正要离开的路由

    • router.beforeEach((to,from)=>{//...return false})从…到…参数是一个回调函数

  • 后置钩子

    router.afterEach((to,from)=>{})

  • 有多种机会植入到路由导航过程中:全局的,单个路由路由独享的,或组件级的

    • 全局导航守卫,作用于整个应用的路由跳转过程,写在index.js创建的路由对象中
      • beforeEach(to,from,next)每次路由跳转前执行,可用来进行权限验证或重定向
      • afterEach(to,from)每次跳转后执行,可用于日志记录或页面统计
      • beforeResolve(to,from,next)所有组件内守卫和异步路由组件被解析之后,导航被确认之前
    • 路由独享的守卫,作用于特定的路由上
      • beforeEnter(to,from,next)进入某个特定路由前执行
    • 组件内的守卫,作用于单个组件内部的路由跳转过程
      • beforeRouteEnter(to,from,next)进入组件前执行,可以用于获取异步数据或进行动态路由配置
      • beforeRouteUpdate(to,from,next)当前组件复用时执行,可以用来对路由参数的变化作出响应
      • beforeRouteLeave(to,from,next)离开当前组件前执行,可以用来确认提示或保存用户输入

你可能感兴趣的:(前端学习,vue.js,学习,笔记,前端)