在哪里添加路由器元数据

问题描述

我想用密码保护特定的路由，并想向每个路由添加元数据，如下所示：

{
  path: '/route-path',name: 'route-name',component: ComponentName,Meta: {
    requiresAuth: true
  }
}

所以我可以检查一下

router.beforeEach((to,from,next)

我可以访问main.js中的router.beforeEach，但是我应该在哪里将auth标志添加到每个路由中？ gridsome.config.js似乎不起作用？

解决方法

我正在寻找相同的东西。我唯一想到的就是更换 router.options.routes属性如下：

// main.js

import { myRoutes } from '@/router'

export default function (Vue,{ appOptions,router,head,isClient }) {          
  // Set vue plugins                                                                
  Vue.use(Vuex)                                                                  
                                                   
                                                                                 
  // Set default layout as a global component                                       
  Vue.component('Layout',DefaultLayout)                                            
                                                                                 
  router.options.routes = myRoutes                                                                                                      
                                                                                 
  router.beforeEach((to,from,next) => {                                        
    // implement navigation guards                                                       
    next()                                                                       
  })                                                                             
}                   

其中myRoutes是您的路线对象的列表：

// router/index.js

import Component1 from '@/components/Component1.vue'

export myRoutes = [
  {
    path: '/route-path',name: 'route-name',component: Component1,meta: {
      requiresAuth: true
    }
  },// ...
]

如果您找到更好的解决方案，请告诉我。

,

虽然目前没有记录，但您可以使用 create page API 并将其传递给 route 属性，例如...

src/pages.js

module.exports = [
  {
    path: '/',route: {
      name: 'index',meta: {
        requiresAuth: false
      }
    },component: './src/views/Index.vue'
  }
]

gridsome.server.js

const pages = require('./src/pages')

module.exports = function (api) {
  api.createPages(({ createPage }) => {
    for (const page of pages) {
      createPage(page)
    }
  })
}

我还将页面组件移动到 src/views 目录中以避免路由自动生成。