标签: vue-router

我使用 Laravel 和 vuejs 创建一个仪表板

我使用 Vue Router 创建嵌套路由，例如：

/admin
/admin/posts
/admin/posts/add
/admin/posts/edit/:id

我尝试切换 /admin/posts 和 /admin/posts/add 但它没有路由正确的组件。它总是路由到 App.Vue

这是我在 web.php 中的代码

Route::get('admin/{any?}', 'App\Http\Controllers\Admin\DashboardController@index')->where('any', '.*');

以及 app.js 中的代码

require('./bootstrap');
import Vue from 'vue';

import App from './App.vue';
import VueRouter from 'vue-router';
import VueAxios from 'vue-axios';
import axios from 'axios';
import { routes } from './routes';

Vue.use(VueRouter);
Vue.use(VueAxios, axios);

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

const app = new Vue({
    el: '#app',
    router: router,
    render: h => …

这里，路由器防护在我的 vue 应用程序上工作正常，但登录后，控制台上出现以下错误。

未捕获（承诺中）错误：通过导航防护从“/login”转到“/”时重定向。

这是我的代码片段。

const routes = [
  {
    path: "/login",
    component: () => import("../views/Auth/Login"),
    meta: { hideForAuth: true },
  },
  {
    path: "/",
    component: DashboardLayout,
    meta: { requiresAuth: true },
    children: [
      {
        path: "home",
        name: "Home",
        component: () => import("../views/Home"),
      },
    ],
  },
];

Auth 守卫：

const loggedIn = localStorage.getItem("auth");

router.beforeEach((to, from, next) => {
  if (to.matched.some((record) => record.meta.requiresAuth)) {
    if (!loggedIn) {
      next({ path: "/login" });
    } else {
      next();
    }
  } else {
    next();
  } …

我<router-link />想用它来导航到 Vue 3 应用程序中的另一个页面，但我还想在单击此链接时运行另一个函数。

现在我必须使用一个额外的<span />元素来包装<router-link />并添加@click属性以依赖事件冒泡。添加@click处理程序<router-link />会导致路由器链接不起作用，浏览器认为它只是一个普通的锚点 href。

    <span @click="handleClose(imageId)">
      <router-link
        :to="{name: 'image', params: {'imageId': imageId}}"
        class="permalink">
        Permalink
      </router-link>
    </span>

有没有更好的办法？

我正在构建一个支持多个设计模板的编辑器应用程序。每个设计模板都有截然不同的字段集，因此它们都有自己的.vue文件。

我正在尝试根据参数动态加载相应的视图组件文件。所以访问/editor/yellow-on-black会加载views/designs/yellow-on-black.vue等等。

我一直在尝试这样做

{
  path: '/editor/:design',
  component: () => {
    return import(`../views/designs/${route.params.design}`)
  }
}

但当然route没有定义。关于如何解决这个问题有什么想法吗？

我有三个主要观点，每个观点都有自己的标记和独特的内容。计划是这样处理的：\n

视图 1：用户

列出所有用户，链接到每个用户，即视图 2。使用 routerlink 可以转到视图 2。

<router-link v-bind:to="\'/user/\' + user.id">\n

视图 2：相册\n列出用户的所有相册。链接到按查看每个专辑，这将带您查看 3。\n我从 url 中获取 id

data() {\n    return {\n      id: this.$route.params.id,\n

这工作正常，然后我使用 id 从 API 获取数据。\n当我想向下嵌套一个新图层以查看 3 (photoView) 时，问题就开始了。\n这里我遇到嵌套问题：\n如果可能的话我想要使用像这样的网址

"/user/:id/albums/:id"\n

我尝试将路由设置为：

{ path: "/user/:id/albums/:id", component: PhotoView },\n

view2 (albumview) 中的 router.link 为：

<router-link v-bind:to="\'/user/\' + id + \'/album/\' + album.id">\n                  <p>{{ album.title }}</p>\n                </router-link>\n

\xc2\xb4t 不起作用。\n然后我尝试将 photoView 的路径作为相册视图的子项，这有效。

{\n    path: "/user/:id",\n    component: AlbumView,\n …

如何使用 Vue-Router 更改查询参数而不重新加载 Vue 中的组件。但是推送新查询总是重新加载组件，使我的 api 请求重新运行

this.router.replace({query: {name: 'John'} })

您能告诉我如何访问Vue 2 Composition API 设置函数中的this.$refs, this.$router,吗？this.$route有提到的解决方案，context.$root但$root不再可用context。请帮忙。

我正在使用带有 Composition API 插件的 Vue 2。似乎useRoute或useRouters不支持Vue 2路由器版本。useRoute并且useRouters可与 Vue-router v4 一起使用。

我在 Ubuntu 服务器上有一个项目，在刷新或手动输入 URL 时会产生 404 错误。例如，我可以访问 example.com，但无法访问 example.com/home，也无法在该页面上刷新而不会出现 404 错误。单击链接可以按预期工作。我在历史模式下使用 Vue 路由器，并在 nginx.conf 文件的 http 部分添加了以下内容：

server {

            listen 80;
            server_name example.com;

            root /var/www/example.com;

            location / {
                    try_files $uri $uri/ /index.html;
            }
    }

我可以使用 sudo nginx -t 测试配置并且它通过了，但我仍然收到 404 错误。可能值得一提的是，我在该服务器上有多个服务器块。

我是 vue.js 的新手，我有一个简单的问题。

我有如下代码：

  asyncData({ params, error }) {
    return Job.api()
      .fetchByID(params.id)
      .then((response) => {
        const selectedJob = response.entities.jobs[0]
        if (selectedJob) {
          const industryID = selectedJob.industryId
          return Industry.api()
            .fetchByID(industryID)
            .then((result) => {
              const jobInd = result.response.data
              return {
                tagsArray:
                  selectedJob.tags === 'null' || selectedJob.tags === ''
                    ? []
                    : selectedJob.tags.split(','),
                job: selectedJob,
                jobIndustry: jobInd,
              }
            })
            .catch(() => {
              error({
                statusCode: 404,
                message: 'Job Industry not found',
              })
            })
        }
      })
      .catch(() => {
        error({
          statusCode: 404,
          message: 'Job not …

我是Nuxt.js的初学者，我正在将 Vue 项目转换为 Nuxt.js，并且我想在一个页面上使用两种布局（默认的一个和另一个）。逻辑是这样的：第一个布局是（默认）或所有页面上的标题，第二个布局是设置栏。
在设置页面中，我有 3 条路线（请参阅此处的项目结构：图片）：

1. 设置/头像
2. 设置/帐户
3. 设置/关于

我希望三个路线的设置栏相同。我可以将设置栏添加到所有三个子页面，例如：layout: 'settings-bar'但随后无法设置标题布局。在我的 Vue 项目中，我仅在设置页面中使用：设置栏组件和下面的<router-view></router-view>组件来更改组件。知道我该怎么做吗？在文档中找不到任何东西。请参阅此处的其他屏幕截图以更好地理解：