vue不能使用&::before

在Vue中，可以使用&::before语法来定义伪元素的样式，但是需要注意的是，如果样式中包含&符号，需要使用双引号将整个选择器包裹起来，例如：

<style>
  .example {
    &::before {
      content: "";
      display: block;
      width: 100px;
      height: 100px;
      background-color: red;
    }
  }
</style>

<template>
  <div class="example"></div>
</template>

这样就可以在Vue中使用&::before语法来定义伪元素的样式了。如果不使用双引号包裹整个选择器，会导致编译错误。

相关问题

vue上.focus { & + span::before {background: red;} }不起作用

这个样式代码看起来没有问题，可能是使用方式有些问题。请确保以下几点：

1. .focus 是一个类选择器，需要在 HTML 元素中添加 class="focus" 属性才能生效。
2. & + span::before 是一个相邻兄弟选择器，需要确保它的前一个元素是一个 <span> 元素。
3. 确保样式代码被正确加载，可以通过浏览器的开发者工具查看样式代码是否正确应用到对应元素上。

如果以上都没有问题，请提供更多的代码和上下文信息，以便更好地定位问题。

vue 使用beforeEach

在 Vue 中，`beforeEach` 是 Vue Router 提供的一个导航守卫，用于在每次导航之前执行一些逻辑。它可以用来进行路由权限控制、全局的路由拦截等操作。

要使用 `beforeEach`，首先需要在 Vue Router 的配置中定义一个全局前置守卫。以下是一个简单的示例：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
  // 路由配置...
})

router.beforeEach((to, from, next) => {
  // 在这里执行你的逻辑

  // 调用 next() 继续导航
  next()
})

在 `beforeEach` 的回调函数中，你可以执行一些逻辑判断，比如检查用户是否登录、判断用户权限等。如果你希望继续导航，需要调用 `next()`。如果你希望中断导航，可以调用 `next(false)`。

需要注意的是，在 `beforeEach` 中如果使用了异步操作（如发送请求验证用户权限），一定要确保正确地调用 `next()`，否则会导致路由无法正常导航。

同时，还可以在具体的路由配置中定义自己的 `beforeEach`，它会在全局前置守卫之后执行。这样你就可以根据具体路由的需求再次对导航进行拦截或处理。