Vue学习笔记之路由

第六章 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路由实现

• 安装路由

  

• main.js引入路由功能

  创建路由器实例

  

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

  创建路由映射

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

  

• 使用v-link指令

  app.vue包含页面级组件

  使用标签

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

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

  

• 渲染页面组件

  启动路由

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

  

7.2 延迟加载动态导入（懒加载）

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

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

  • 方式一：

    

    或者使用箭头函数

    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)离开当前组件前执行，可以用来确认提示或保存用户输入