Запретить отображение или изменение значения URL в текущей адресной строке - PullRequest
Новая
       7

Запретить отображение или изменение значения URL в текущей адресной строке

0 голосов
/ 27 апреля 2018

У меня есть этот сценарий vue js 

const NotfoundComponent = {
    template: '<h1>Not found</h1>'
};

const HomeComponent = {
    template: '<h1>Home</h1>'
};

const AboutComponent = {
    template: '<h1>About</h1>'
};

const routes = [
    {
    path: '/',
    component: HomeComponent
  },
  {
    path: '/about',
    component: AboutComponent
  },
  {
    path: '*',
    component: NotfoundComponent
  }
];

const router = new VueRouter({
      mode: 'history',
      routes
});

new Vue({
    el: '#app',
    router
});

, который использует vue-router. Я использую vue js на странице jsp внутри приложения Spring mvc. Я бы хотел, чтобы загрузка страницы jsp осуществлялась как обычно службой Jetty, и для маршрутизации между компонентами внутри страницы использовался только маршрутизатор vue js.

У меня есть настройка маршрутизатора, и я работаю внутри страницы, однако при нажатии на ссылку я не хочу никаких ссылок на эту vue js 

<div id="app">
  <router-link to="/">home</router-link>
  <router-link to="/about">about</router-link>
  <router-link to="/something">no route</router-link>
  <router-view></router-view>
</div>

для изменения текущей адресной строки или добавления чего-либо нового к ней.

Можно ли это сделать с помощью vue js?.

Ответы [ 2 ]

0 голосов
/ 27 апреля 2018

Пожалуйста, проверьте ниже ссылку, вы хотите использовать абстрактный

https://jsfiddle.net/qpnaokhf/

const router = new VueRouter({
  routes,
  mode: 'abstract'
})
0 голосов
/ 27 апреля 2018

Вы хотите режим 'abstract' . 

const router = new VueRouter({
      mode: 'abstract',
      routes
});

Для этого необходимо нажать начальный URL: 

// you main Vue instance
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App },
  mounted() {
    this.$router.replace('/') // added this
  }
})

Демонстрация CodeSandbox здесь .

...