Я создаю SPA в VueJS, и когда я нажимаю навигационные ссылки, они ведут меня к соответствующим идентификаторам на странице. У меня есть компонент для моей страницы конфиденциальности. Когда вы переходите в меню к go назад к любой ссылке на маршрутизатор, он добавляет имя ссылки к существующей ссылке. Я запутался в том, как справиться с этим, чтобы включить sla sh в URL. Например. Я нахожусь на своей главной странице, и я нажимаю на ссылку конфиденциальности в нижнем колонтитуле, и я перехожу на страницу конфиденциальности, как и следовало ожидать. Однако, когда я нажимаю на ссылку меню, скажем ... например, ссылку на сервисы, при наведении на ссылку, я вижу, что она хочет go на URL, например: https://rrspark.com/Privacy#services Как видите, это ошибочный URL, который я хочу https://rrspark.com/#services, который является одним из моих маршрутов. Я на 100% убежден, что что-то упустил. Любая помощь будет оценена. Спасибо. Ниже приведен мой код.
Папка компонентов Nav. vue
<template>
<div>
<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="/">
<span class="first-r">R</span>
<span class="second-r">R</span>
<span class="spark">Spark</span>
</a>
<button
class="navbar-toggler navbar-toggler-right"
type="button"
data-toggle="collapse"
data-target="#navbarResponsive"
aria-controls="navbarResponsive"
aria-expanded="false"
aria-label="Toggle navigation"
>
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav text-uppercase ml-auto">
<li class="nav-item" v-for="(linkObj, ind) in navList" :key="ind">
<a
class="nav-link js-scroll-trigger hashed-menu-item"
:href="linkObj.path"
v-if="linkObj.path.indexOf('#') === 0"
>{{linkObj.name}}</a>
<router-link
class="nav-link"
js-scroll-trigger
v-else
:to="linkObj.path"
>{{linkObj.name }}</router-link>
</li>
</ul>
</div>
</div>
</nav>
</div>
</template>
<script>
export default {
data: () => ({
navList: [
{
name: "Services",
path: "#services"
},
{
name: "Portfolio",
path: "#portfolio"
},
{
name: "About",
path: "#about"
},
{
name: "Team",
path: "#team"
},
{
name: "Contact",
path: "#contact"
}
]
})
};
</script>
<style lang="">
</style>
Root маршрутизатор. js
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
function load(componentName) {
return () => import(`@/components/${componentName}`);
}
const router = new VueRouter({
mode: 'history',
routes: [
{
path: '/',
name: 'Home',
component: load('Home')
}
,
{
path: '/services',
name: 'Services',
component: load('Services')
},
{
path: '/portfolio',
name: 'Portfolio',
component: load('Portfolio')
},
{
path: '/about',
name: 'About',
component: load('About')
},
{
path: '/team',
name: 'Team',
component: load('Team')
},
{
path: '/contact',
name: 'Contact',
component: load('Contact')
},
{
path: '/privacy',
name: 'Privacy',
component: load('Privacy')
},
{
path: '/success',
name: 'Success',
component: load('Success')
},
{
path: '*',
name: '404',
component: load('404')
}
]
});
export default router;
Папка компонентов
<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">
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
<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>
Нижний колонтитул. vue
<template>
<div>
<footer class="footer">
<div class="container">
<div class="row align-items-center">
<div class="col-md-4">
<span class="copyright">Copyright © 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>