vuejs2 - Vue路由器: Keep query parameter and use same view for children

Question

我正在用 Vue 重写现有的 Angular 1 应用程序。

应用程序始终需要通过 locale 对用户进行身份验证, id和 token在输入任何 View 之前。尊重我们 API 的约定，我指定了 token作为我的主要父路由中的查询参数。

来自现有的 Angular 的 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 View ，我希望 View 会改变并且查询 token 会保持不变，例如 /en-US/123?token=abc至 /en-US/123/profile?token=abc .两者都不会发生。

我正在使用 Vue 2.3.3 和 Vue Router 2.3.1。

问题:

导航到子路由时可以保留查询参数吗？

我在这里使用 Vue 路由器吗？还是我需要责怪我的 UI 路由器偏见？

Answer 1

您可以在路由器的全局 Hook 中解决此问题

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 )