Vue 라우터:쿼리 매개 변수 유지 및 하위 항목에 대해 동일한 보기 사용

Vue 라우터:쿼리 매개 변수 유지 및 하위 항목에 대해 동일한 보기 사용

나는 Vue로 기존의 Angul 1 어플리케이션을 다시 쓰고 있어.

애플리케이션은 항상 다음을 통해 사용자를 인증해야 함locale,id그리고token보기를 입력하기 전에API의 규약을 존중하여token기본 부모 경로 내의 쿼리 매개 변수로 사용됨.

기존 Angul의 UI 라우터 구현에서 나온 나는 이것이 바로 다음 방법이라고 생각했다.

// main.js
new Vue({
  el: '#app',
  router,
  store,
  template: '<router-view name="main"></router-view>'
})

// router.js
const router = new Router({
  mode: 'history',
  routes: [
    {
      name: 'start',
      path : '/:locale/:id', // /:locale/:id?token didn't work
      query: {
        token: null
      },
      beforeEnter (to, from, next) {
        // 1. Get data from API via locale, id and token
        // 2. Update store with user data
      },
      components: {
        main: startComponent
      },
      children: [{
        name: 'profile',
        path: 'profile',
        components: {
          main: profileComponent
        }
      }]
    }
  ]
})    

다음 위치로 이동할 때profile보기, 뷰가 변경되고 쿼리 토큰이 유지될 것으로 예상(예:/en-US/123?token=abc로/en-US/123/profile?token=abc. 둘 다 일어나지 않는다.

나는 Vue 2.3.3과 Vue Router 2.3.1을 사용하고 있다.

질문:

• 하위 경로로 이동할 때 쿼리 매개 변수를 유지할 수 있는가?
• 내가 지금 Vue 라우터를 사용하고 있는 거야?아니면 UI 라우터 바이어스를 탓해야 하는가?

라우터의 전역 후크에서 이 문제를 해결할 수 있음

import VueRouter from 'vue-router';
import routes from './routes';

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

function hasQueryParams(route) {
  return !!Object.keys(route.query).length
}

Router.beforeEach((to, from, next) => {
   if(!hasQueryParams(to) && hasQueryParams(from)){
    next({name: to.name, query: from.query});
  } else {
    next()
  }
})

새 경로의 경우(to)에는 자체 매개변수가 없으며, 그러면 이전 경로에서 해당 매개변수를 가져온다(from)

추가할 수 있는 항목mounted라우터 네비게이션 가드를 걸다beforeEach이것처럼.preserveQueryParams:

// helpers.js
import isEmpty from 'lodash/isEmpty';

const preserveQueryParams = (to, from, next) => {
  const usePreviousQueryParams = isEmpty(to.query) && !isEmpty(from.query);
  if (usePreviousQueryParams) {
    next({ ...to, query: from.query });
  } else {
    next();
  }
};

// StartComponent.vue
removeBeforeEachRouteGuard: Function;

mounted() {
  this.removeBeforeEachRouteGuard = this.$router.beforeEach(preserveQueryParams);
}

// don't forget to remove created guard
destroyed() {
  this.removeBeforeEachRouteGuard();
  // resetting query can be useful too
  this.$router.push({ query: {} });
}

참조URL: https://stackoverflow.com/questions/45091380/vue-router-keep-query-parameter-and-use-same-view-for-children