防止 url 出现或修改当前地址栏值答案

【问题标题】：Prevent url from appearing or modifying current address bar value防止 url 出现或修改当前地址栏值
【发布时间】：2018-10-08 09:04:21
【问题描述】：

我有这个 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。我在 spring mvc 应用程序内的 jsp 页面内运行 vue js。我想正常加载由码头服务的jsp页面，并且只使用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 可以做到吗？

【问题讨论】：

连你不想要的#/ 部分都没有？（这可以通过删除mode: 'history'来实现。）

标签： vue.js vue-router

【解决方案1】：

你想要'abstract' mode。

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 demo here.

【讨论】：

【解决方案2】：

请检查以下链接，您要使用摘要

https://jsfiddle.net/qpnaokhf/

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

【讨论】：