Vue-Router：如何全局禁用路径哈希并将其添加到某些路由中？答案

【问题标题】：Vue-Router: How to disable the path's hash globally & add it in certain routes?Vue-Router：如何全局禁用路径哈希并将其添加到某些路由中？
【发布时间】：2020-02-22 01:56:40
【问题描述】：

有一个应用程序，其中路由由两侧处理：一些路由由 CMS 处理，一些由 vue-router 处理。例如：http://localhost/ 由 CMS 和网络服务器 处理，但 http://localhost/complex-page/#/my-route 由 CMS 和 Vue 路由器 处理。

这意味着它有两个vue-router 实例：全局（仅用于$route 全局，它使用history 模式）和本地（用于与hash 模式一起使用）。这里有一个问题：本地路由器表现得好像他覆盖了全局模式，并且散列添加到各处的路由，即使没有具有本地路由的组件。

这是非常接近实际项目的代码：

let first = {
  name: "first",
  template: `<section><h1>First</h1></section>`
};


let second = {
  name: "second",
  template: `<section><h2>Second</h2></section>`
};

let outerComponent = Vue.component('container', {
  template: `
  <section>
    <h2>Outer</h2>
    <h3>Path: {{window.location.href}}</h3>
    <nav>
      <router-link to='/first' append>First</router-link>
      <router-link to='/second' append>Second</router-link>
    </nav> 
    <h3>Inner:</h3>
    <router-view></router-view>
  </section>
  `,
  router: new VueRouter({
    mode: 'hash', // HASH!!!
    components: {
      'first': first,
      'second': second
    },
    routes: [{
        path: "/first",
        component: first,
        name: "first"
      },
      {
        path: "/second",
        component: second,
        name: "second"
      }
    ]
  })
});


// Root!
new Vue({
  el: "#app",
  router: new VueRouter({
    mode: "history" // HISTORY!
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.1.3/vue-router.min.js"></script>

<div id="app">
  <!-- Even if delete this node, hash will be added -->
  <container></container>
</div>

如何全局禁用路径的哈希并将其添加到某些路由中？

【问题讨论】：

标签： vuejs2 vue-router

【解决方案1】：

您可以通过添加 mode: 'history', 来全局禁用 #，如下所示：

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

您可以在 official documentation 中阅读更多内容。

编辑：

如果您希望在特定路线上使用 #，您可以这样完成：

const router =
        new VueRouter({
            mode: 'history',
            routes: [
                {
                    path: "#/my-component-1",
                    component: MyComponent_1
                },
                {
                    path: "#/my-component-2",
                    component: MyComponent_2
                }
            ]
        });

export default {
        components: {
            // ... my routed components here
        },
        router
    }

【讨论】：

该代码应该放在哪里？索引.js？我尝试了类似的方法，但没有帮助
@YesMan 第一个码sn-p还是第二个码哪个码？
@YesMan 我已经更新了我的答案。检查我添加的代码。我使用了您之前提供的相同代码示例，其中添加了 mode: 'history', 行。
你说的是我的本地组件？不明白，本地路由器怎么改变全局路由？
@YesMan 让我们一次解决一个问题。通过添加mode: 'history',你应该去掉url中的井号，你能确认它有效吗？

【解决方案2】：

只需去掉#启用历史模式

new VueRoute({
    //...
    mode:'history'
   //....
})

【讨论】：