路由器链接的正则表达式

Question

我正在尝试构建一个导航栏，因为它会接收来自道具的链接，所以它可能是路由器链接或超链接，这就是为什么我想使用正则表达式来检查第一个字符是否为 / 以及是否所以然后使用推送或使用href。但是我遇到了一个错误。我在这里做错了什么？我的正则表达式错了吗？我的方法也正确吗？

error  Unnecessary escape character: \/          no-useless-escape

到目前为止我的代码

<template>
  <nav>
    <ul>
      <li v-for="(item, $index) in navLinks" :key="$index">
        <router-link :to="item.link" v-if="item.link.match(reg)">{{ item.name }}</router-link>
        
        <a :href="item.link" v-else>{{ item.name }}</a>
      </li>
    </ul>
  </nav>
</template>

<script>
export default {
  name: "Navbar",
  props: {
    navLinks: {
      type: Array,
    },
  data () {
  return {
    reg: '^[\/].*' // the regex which sees if the first character is `/` or not
    }
   }
   }
</script>

导航链接可以是

const navLinks = [
  { name: "About", 
    link: "#about" },
  {
    name: "Projects",
    link: "/projects",
  },
];

Answer 1

在 vue 中，如果你想在模板部分使用变量，那么你需要在 data 属性中定义它。

data () {
  return {
    reg: '^[/].*'
  }
}

现在您可以在模板部分访问此 reg。

对于正则表达式的问题，将您的正则表达式定义为'^[/].*'。