Vue学习

tips-1 vue组件的根标签只能有一个<div>

正确示例如下：

<template>
	<div>
	</div>
</template>

错误示例如下：

<template>
	<div>
	</div>
	<div>
	</div>
	<div>
	</div>
</template>

tips-2 资源路径获取

在启动vue项目时发现获取不到资源图片
这样

或者这样

我的代码是这样

所以路径对不上，所以在开发中尽量用相对路径，所以我改成这样了

tips-3 路由

路由守卫是用于控制导航的一种机制,它允许你在路由发生变化之前或之后执行一些代码，从而控制用户的导航行为。在Vue.js中，路由守卫主要是通过对路由对象的 beforeEach、beforeResolve 和 afterEach 方法来实现的。

• beforeEach:

在导航触发之前调用。
可以用于进行路由拦截、权限验证等操作，比如检查用户是否登录。
可以通过返回 false 或者一个包含 path 属性的对象来取消导航。

• beforeResolve:

在导航触发之前、解析完组件之后调用。
可以用于在路由解析完之后执行一些逻辑，比如加载数据。

• afterEach:

在导航完成后调用。
可以用于执行一些清理操作或者统计页面访问数据。

可以在全局配置、单个路由配置或者组件内部使用,例如在路由配置

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: () => import('../views/Home.vue'),
      beforeEnter: (to, from, next) => {
        // 在进入特定路由前执行逻辑
        if (someCondition) {
          next(); // 继续导航
        } else {
          next('/'); // 跳转到其他路由
        }
      }
    }
  ]
});

在组件内部使用：

export default {
  beforeRouteEnter (to, from, next) {
    // 在进入组件前执行逻辑
    if (someCondition) {
      next(); // 继续导航
    } else {
      next('/'); // 跳转到其他路由
    }
  },
  beforeRouteLeave (to, from, next) {
    // 在离开组件前执行逻辑
    next(); // 继续导航
  }
}