Javascript 从组件内部SPA并单击导航将附加到url VueJS

我正在VueJS中创建SPA，当我单击导航链接时，它们会将我带到页面中相应的id。我的隐私页面有一个组件。当您转到菜单返回任何路由器链接时，它会将链接的名称附加到现有url。我不知道如何处理这个问题，以便在url中包含斜杠。例如我在我的主页上，我点击页脚的隐私链接，它会像人们期望的那样将我带到隐私页面。然而，当我点击菜单链接时，说。。。例如，“服务”链接，当我将鼠标悬停在该链接上时，我可以看到它想要转到一个url，例如： 正如你所看到的，这是一个错误的url，因为我想这是我的路线之一。我100%相信我错过了什么。任何帮助都将不胜感激。非常感谢。下面是我的代码

组件文件夹 导航vue

组件文件夹

<template>
  <div id="#privacy">
    <Nav></Nav>
    <div class="header-holder mb-4">
      <a class="home-link float-left font-italic" href="/">
        <span class="first-r">R</span>
        <span class="second-r">R</span>
        <span class="spark">Spark</span>
      </a>
      <h1 id="traL1" data-token="translatable.traL1" class="pt-5 text-white">RR Spark Privacy Policy</h1>
      <hr />
    </div>
    <div class="container">
      <div class="row align-items-center p-3">
        <p class="place-left" id="traL3" data-token="translatable.traL3">Last updated: March 8 2020</p>
        <p class="place-left" id="traL4" data-token="translatable.traL4">
          RR Spark operates https://www.rrspark.com (the "Site"). This page
          informs you of our policies regarding the collection, use and
          disclosure of Personal Information we receive from users of the
          Site.
        </p>
        <p class="place-left" id="traL5" data-token="translatable.traL5">
          We use your Personal Information only for providing and improving
          the Site. By using the Site, you agree to the collection and use of
          information in accordance with this policy.
        </p>
        <h3
          class="place-left"
          id="traL6"
          data-token="translatable.traL6"
        >Information Collection And Use</h3>
        <p class="place-left" id="traL7" data-token="translatable.traL7">
          While using our Site, we may ask you to provide us with certain
          personally identifiable information that can be used to contact or
          identify you. Personally identifiable information may include, but
          is not limited to your name ("Personal Information").
        </p>
        <h3 class="place-left" id="traL8" data-token="translatable.traL8">Log Data</h3>
        <p class="place-left" id="traL9" data-token="translatable.traL9">
          Like many site operators, we collect information that your browser
          sends whenever you visit our Site ("Log Data").
          This Log Data may include information such as your computer's
          Internet Protocol ("IP") address, browser type, browser version, the
          pages of our Site that you visit, the time and date of your visit,
          the time spent on those pages and other statistics.
          In addition, we may use third party services such as Google
          Analytics that collect, monitor and analyze data from users visiting
          this site.
        </p>
        <h3 class="place-left" id="traL12" data-token="translatable.traL12">Communications</h3>
        <p class="place-left" id="traL13" data-token="translatable.traL13">
          We may use your Personal Information to contact you with
          newsletters, marketing or promotional materials and other
          information that we may feel useful for those visiting the site.
        </p>
        <h3 class="place-left" id="traL14" data-token="translatable.traL14">Cookies</h3>
        <p class="place-left" id="traL15" data-token="translatable.traL15">
          Cookies are files with small amount of data, which may include an
          anonymous unique identifier. Cookies are sent to your browser from a
          web site and stored on your computer's hard drive.
        </p>
        <p class="place-left" id="traL16" data-token="translatable.traL16">
          Like many sites, we use "cookies" to collect information. You can
          instruct your browser to refuse all cookies or to indicate when a
          cookie is being sent. However, if you do not accept cookies, you may
          not be able to use some portions of our Site.
        </p>
        <h3 class="place-left" id="traL17" data-token="translatable.traL17">Security</h3>
        <p class="place-left" id="traL17a" data-token="translatable.traL17a">
          The security of your Personal Information is important to us, but
          remember that no method of transmission over the Internet, or method
          of electronic storage, is 100% secure. While we strive to use
          commercially acceptable means to protect your Personal Information,
          we cannot guarantee its absolute security.
        </p>
        <h3
          class="place-left"
          id="traL18"
          data-token="translatable.traL18"
        >Changes to this Privacy Policy</h3>
        <p class="place-left">
          This Privacy Policy is effective as of (October 1st 2019) and will
          remain in effect except with respect to any changes in its
          provisions in the future, which will be in effect immediately after
          being posted on this page.
        </p>
        <p class="place-left">
          We reserve the right to update or change our Privacy Policy at any
          time and you should check this Privacy Policy periodically. Your
          continued use of the Service after we post any modifications to the
          Privacy Policy on this page will constitute your acknowledgment of
          the modifications and your consent to abide and be bound by the
          modified Privacy Policy.
        </p>
        <p class="place-left">
          If we make any material changes to this Privacy Policy, we will post
          that information here.
        </p>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
import Nav from "./Nav";
import Footer from "./Footer";
export default {
  components: {
    Nav,
    Footer
  }
};
</script>
<style lang="sass">

RR Spark隐私政策

最后更新日期：2020年3月8日

RR Spark运行https://www.rrspark.com （以下简称“现场”）。本页
通知您我们关于收集、使用和维护的政策
披露我们从用户处收到的个人信息
地点。


我们仅将您的个人信息用于提供和改进
网站。使用本网站即表示您同意收集和使用
根据本政策提供的信息。

信息收集和使用

在使用我们的网站时，我们可能会要求您向我们提供某些信息
可用于联系或
确认你的身份。个人识别信息可能包括，但
不限于您的姓名（“个人信息”）。

日志数据

像许多网站运营商一样，我们收集您的浏览器需要的信息
每当您访问我们的网站时发送（“日志数据”）。
此日志数据可能包括计算机的
Internet协议（“IP”）地址、浏览器类型、浏览器版本、
您访问我们网站的页面，访问时间和日期，
花在这些页面和其他统计数据上的时间。
此外，我们可能会使用第三方服务，如谷歌
收集、监控和分析访问用户数据的分析
这个网站。

通讯

我们可能会使用您的个人信息与您联系
通讯、营销或宣传材料及其他
我们认为对访问该网站的人有用的信息。

曲奇饼

Cookie是包含少量数据的文件，其中可能包括
匿名唯一标识符。Cookie将从服务器发送到浏览器
网站，并存储在计算机硬盘上。


像许多网站一样，我们使用“cookies”来收集信息。你可以
指示浏览器拒绝所有cookie或指示
正在发送cookie。但是，如果您不接受cookies，您可以
无法使用我们网站的某些部分。

安全

您个人信息的安全性对我们很重要，但是
请记住，没有通过互联网进行传输的方法，或者
电子存储的安全性为100%。当我们努力使用
商业上可接受的保护您个人信息的方式，
我们不能保证它的绝对安全。

对本隐私政策的更改

本隐私政策自（2019年10月1日）起生效，并将
保持有效，除非其条款发生任何变更
未来的规定，该规定将在之后立即生效
正在本页上发布。


我们保留随时更新或更改隐私政策的权利
您应该定期检查此隐私政策。你的
在我们发布对服务的任何修改后，继续使用该服务
本页上的隐私政策将构成您对
修改和您同意遵守并受
修改隐私政策。


如果我们对本隐私政策做出任何重大更改，我们将发布
这些信息在这里。

从“/Nav”导入Nav；
从“/Footer”导入页脚；
导出默认值{
组成部分：{
导航，
页脚
}
};

main.js

import Vue from 'vue';
import App from './App.vue';
import router from '../router';
import VueResource from "vue-resource"
import './assets/css/style.css'
import './assets/vendor/bootstrap/css/bootstrap.min.css';
import './assets/vendor/fontawesome-free/css/all.min.css';
import NotFound from './components/404';

Vue.config.productionTip = false
Vue.use(VueResource);
Vue.use(NotFound);


new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

    </style>

从“Vue”导入Vue；
从“/App.vue”导入应用程序；
从“../router”导入路由器；
从“vue资源”导入VueResource
导入“./assets/css/style.css”
导入“./assets/vendor/bootstrap/css/bootstrap.min.css”；
导入“/assets/vendor/free/css/all.min.css”；
从“/components/404”导入未找到的文件；
Vue.config.productionTip=false
Vue.use（VueResource）；
Vue.使用（未找到）；
新Vue({
路由器，
渲染：h=>h（应用程序），
}).$mount（“#应用程序”）

App.vue

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

导出默认值{}；
#应用程序{
F
import Vue from 'vue';
import App from './App.vue';
import router from '../router';
import VueResource from "vue-resource"
import './assets/css/style.css'
import './assets/vendor/bootstrap/css/bootstrap.min.css';
import './assets/vendor/fontawesome-free/css/all.min.css';
import NotFound from './components/404';

Vue.config.productionTip = false
Vue.use(VueResource);
Vue.use(NotFound);


new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

    </style>

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

<template>
  <div>
    <footer class="footer">
      <div class="container">
        <div class="row align-items-center">
          <div class="col-md-4">
            <span class="copyright">Copyright &copy; RR Spark 2020</span>
          </div>
          <div class="col-md-4">
            <ul class="list-inline social-buttons">
              <li class="list-inline-item">
                <a href="########" target="_blank">
                  <i class="fab fa-instagram"></i>
                </a>
              </li>
              <li class="list-inline-item">
                <a href="#######" target="_blank">
                  <i class="fab fa-facebook-f"></i>
                </a>
              </li>
              <li class="list-inline-item">
                <a href="########" target="_blank">
                  <i class="fab fa-linkedin-in"></i>
                </a>
              </li>
            </ul>
            <p class="mt-3 text-white">Phone: ###-###-####</p>
          </div>
          <div class="col-md-4">
            <ul class="list-inline quicklinks">
              <li class="list-inline-item">
                <router-link :to="'/Privacy'">Privacy Policy</router-link>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </footer>
  </div>
</template>
<script>
export default {};
</script>
<style lang="sass">

</style>