Question

有一个应用程序，其中路由由两侧处理：一些路由由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>

如何全局禁用路径的哈希并在某些路由中添加它？

Answer 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
    }

Answer 2

只需删除＃启用历史记录模式

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

Vue-Router：如何全局禁用路径的哈希并在某些路由中添加它？

2 个答案: