Vue-Router: Как глобально отключить хэш пути и добавить его в определенные маршруты? - PullRequest
Новая
       11

Vue-Router: Как глобально отключить хэш пути и добавить его в определенные маршруты?

0 голосов
/ 25 октября 2019

Есть приложение, в котором маршруты обрабатываются двумя сторонами: некоторые маршруты обрабатываются CMS, а некоторые - с помощью vue-router. Например: http://localhost/ обрабатывает CMS и веб-сервер , но http://localhost/complex-page/#/my-route обрабатывает оба: CMS и Vue router .

Это означает, что у него есть два экземпляра vue-router: глобальный (только для использования $route globaly, он использует режим 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>

Как глобально отключить хэш пути и добавить его в определенные маршруты?

Ответы [ 2 ]

1 голос
/ 25 октября 2019

Вы можете отключить # глобально, добавив mode: 'history', примерно так: 

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

Вы можете прочитать больше в официальная документация .

РЕДАКТИРОВАТЬ:

Если вы хотите # на определенных маршрутах, выможет сделать это так: 

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
    }
0 голосов
/ 26 октября 2019

Просто удалите # включить режим истории 

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