就像在每个应用程序中一样，我有几条路线。例如（router/index.js摘录）：

[{
    path: '/reporting',
    name: 'Reporting',
    component: reporting,
    meta: {
        adminOnly: true
    }
},
...]

正如您在路由定义中看到的，访问时reporting用户需要具有管理员权限，这是 vuex 存储中的一个属性。问题：这个属性是异步的，并且在最初访问守卫时当然是错误的。我怎样才能让我的守卫等待呢？

警卫：

if (to.matched.some(route => route.meta.adminOnly)) {
    if (store.getters.userInfo.isAdmin) {
        next()
    } else {
      next('/')
    }
} else {
    next()
}

我想在一个组件离开之前完成一些信息验证。

我扫描了vue-router文档： https: //router.vuejs.org

但我vue-cli在我的文件中使用 ,：router1.vue，

console.log(this.$router.beforeLeave) -> undefined

我该如何使用它？

我刚刚完成在 Vue js 2 上构建我的作品集并上线。我有三种看法。当我重新加载主视图时，一切正常，但在另外两个视图上，我有几条错误消息。

Error parsing a meta element's content: ';' is not a valid key-value pair separator. Please use ',' instead.
Work:30 A parser-blocking, cross site (i.e. different eTLD+1) script,
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://website.com' is therefore not allowed access. The response had HTTP status code 403. 

这是我第一次使用单页 Web 应用程序架构。请问有办法解决这个问题吗？

这是路由器文件

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/views/Home'
import Work from '@/views/Work'
import About from '@/views/About'

Vue.use(VueRouter) …

我有一个登录页面，如果用户未经过身份验证（通过元标记身份验证），我将重定向到该登录页面，相反，如果用户已登录，如果他/她尝试访问登录页面，我将重定向到主页（通过元标记 guest）。经过身份验证的状态存储在 Vuex 中：

router.beforeEach((to, from, next) => {
  if (to.matched.some(m => m.meta.auth) && 
    !store.state.auth.authenticated) {
  // If user is not authenticated, redirect to login page
    next({
      name: 'Login',
    })
  } else if (to.matched.some(m => m.meta.guest) && 
    store.state.auth.authenticated) {
  // If user is authenticated and on guest page, redirect to home
    next({
      name: 'Home',
    })
  } else {
    next()
  }
})

我想做的是将我的登录页面设置为模态页面而不是登陆页面。我已经能够制作一个登录模式并在单击按钮时显示它，但是如果用户尝试访问需要身份验证的链接而不是访问，有没有办法让 vue-router 自动显示模式专门的登陆页面？

我正在尝试创建一个 Laravel Vue SPA 应用程序。而且似乎我无法使路线全部正常运行。每次我使用 get('{any}') 时，我所有的 axios get 方法调用都会返回 index.blade.php。但是如果我在 routes.js 中定义所有路由，在我的 web.php (Laravel) 中使用或多或少相同的签名，我的 axios 路由在获取数据时工作正常。

网页.php

// This work but every time I do an Axios call it returns my index.blade.php
Route::get('{any}', 'SiteController')->where('any', '.*');

// This works if I define all routes, with axios fetching data normally and 
// displaying the data in Vue normally
Route::get('/', 'SiteController');
Route::get('/blog', 'SiteController');
Route::get('/post/{postId?}', 'SiteController');

路由.js

const routes = [
    { path: '*', component: Home },
    {
        path: '/',
        component: Home, …

当我使用 nuxt 部署通用应用程序时，我注意到引发异常的客户端 $axios 请求只是将错误代码返回到控制台。有没有办法让 nuxt 重定向到我们在 layouts 文件夹中指定的 error.vue ？我似乎只能通过调用context.error服务器端的方法才能到达此页面。

我一直在接近它如下：

async submit (evt) {
  try {
    const { data } = await this.$axios.get(`some/url`)
    ...
  } catch (e) {
    throw new Error(e) // assume, for the sake of argument, that the error is: { 'statusCode': 403, 'message': 'Forbidden' }
  }
}

语境

我有一个pages像这样的结构文件夹：

pages/
--| home.vue
--| index.vue
--| countries
----| countriesChildren

我的索引 vue 看起来像这样：

pages/
--| home.vue
--| index.vue
--| countries
----| countriesChildren

问题

问题是当用户转到 时my-site.com/，他们会转到 index.vue 但没有要显示的默认页面。
我想给他们现在位于的主页/home

我可以将用户重定向/到 ，/home但我不确定这是更简洁的方式：/
最佳配置是：/是没有/home路径的主页。

结构将是：

/-> 主页
/countries-> 国家列表
/countries/country-> 国家
等

在我的 Nuxt 应用程序中，我有一个属性列表，单击时我想(/properties/_slug.vue)在用户所在的任何页面前面打开相应的属性页面作为模式。

dribble.com是我正在尝试重新创建的功能的一个确切示例。

如果从 中单击属性链接/，则 url 应该是/properties/slug-of-prop，当我点击关闭按钮或后退按钮时，它应该关闭模式并将 url 返回到单击前的状态。此外，我希望能够访问localhost:3000/properties/slug-of-prop并让它向我显示properties前面带有模态的列表。

我的文件结构是：

/pages
--index.vue
--/properties
----index.vue
----_slug.vue

我已经尝试过这里列出的解决方案：https : //stackoverflow.com/a/60793173/2232797但是，它不会在点击后退按钮时删除模态。此外，我还尝试在此处通过使用中间件添加showModal为我的路由的参数来实现此 vue.js 解决方案，但它正在使用router-view我很难理解它是如何工作的。

这是我的/properties/index.vue样子：

<template>
  <section class="container-fluid">
    <!-- property cards -->
    <div class="info-row scroll-row border-bottom">
      <nuxt-link
        v-for="property in properties"
        :key="property"
        :to="`properties/${property.uid}`"
        tag="div"
      >
        {{ property.uid }}
      </nuxt-link>
    </div>
    <div v-if="showModal" class="modal-route">
      <div class="modal-content">
        <router-view></router-view>
      </div>
    </div>
  </section>
</template>

<script>
import { …

我想有条件地在 vue 路由器中导入一个组件。这是我目前所拥有的：

children: [
  {
    path: ':option',
    component: () => import('../components/Option1.vue'),
  },
],

根据什么:option是我想要导入一个不同的组件（Option1.vue，Option2.vue，等）。我知道我可以放几个，children但我实际上需要option在我的父组件中使用该变量（如果路由有选项，我会进行测试）。

怎么可能做到这一点？提前致谢 ：）

我有一个使用 Azure 静态 Web 应用程序部署的 vue 项目。项目包含路由器（历史模式）功能。它在本地运行完美。但是在部署到 Azure 路径后，链接无法正常工作。例如，当我尝试从浏览器导航访问 mysite.com/about 时，它返回 404 错误。

公共文件夹中的 staticwebapp.config.json 文件：（我从 microsoft docs 中获取此示例）

{
    "routes": [
      {
        "route": "/*",
        "serve": "/index.html",
        "statusCode": 200
      }
    ]
  }

我的路由器js文件：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '/api',
    name: 'Api',
    component: () => …