VueRouter的router-link标签属性配置问题

在使用VueRouter插件（VueRouter是版本3，Vue是版本2）的router-link标签有一个很奇怪的现象，
部分代码如下：

  • for="t in thingList" :key="t.id">
           "active" :to="{
          path:"/home/Thing/Detail",
          query:{
            id:t.id,
            theContent:t.theContent
          }
        }">
        {{t.title}}
        
        
    •

    以上是router-link标签to属性的对象写法，但是很奇怪的是在配置path这个key的时候,使用双引号去
    框着这个/home/Thing/Detail路径就会被vscode的语法检查标红。同时页面的router-link也无法识别完成渲染。
    标红如图：

    img


    渲染结果如图：

    img

    img

    无法正确的把router-link渲染成功。

    奇怪的地方来了，当我把path这个key的value值由双引号改成单引号之后，页面就正常了。

    <router-link active-class="active" :to="{
          path:'/home/Thing/Detail',
          query:{
            id:t.id,
            theContent:t.theContent
          }
        }">
        {{t.title}}
        router-link>

    img

    img

    在js里面一个字符串不应该是使用单引号或者双引号都可以吗？为什么使用双引号这里会有错误。

    这是 JS 这门语言的特性！！ 和字符串外面用何种引号形式无关

    这是因为path本来就是:to的值，而:to的值就是用双引号包含的，如果path后面再用双引号的话，解析的时候就会认为:to="{path:"而已，后面的就不会一起解析了

    img

    VueRouter的标签是用来实现页面路由跳转的组件。可以通过配置一些属性来实现不同的路由跳转方式。

    以下是常用的一些属性及其作用：

    to：用来指定目标路由的路径，可以是字符串，也可以是一个包含路径信息的对象。
    replace：当设置为true时，点击链接后将不会保留历史记录。
    append：当设置为true时，点击链接后将会在当前路径后面追加目标路径。
    tag：用来指定渲染为哪种HTML标签，默认是标签。
    active-class：用来指定当前路由对应的链接的class类名。
    exact：当设置为true时，只有路径完全匹配时才会添加激活类。
    event：用来指定触发路由的事件，默认是click事件。
    target：用来指定链接打开方式，例如_blank表示在新标签页中打开。
    例如，以下代码创建了一个链接，指向名为“home”的路由，并且在点击链接时不会保留历史记录：

    Go to Home
    又例如，以下代码创建了一个链接，指向名为“about”的路由，并且当路径为/about时，链接的class类名为active：

    Go to About