标签: vue-router

我创建了新的 @vue/cli 4.0.5 应用程序，并在文件 src/router/index.js 中看到：

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

我在本地的 .env 中没有任何 BASE_URL 参数，并且在本地主机下使用命令运行：

npm run serve

我在本地工作没问题

我将 apache(ubuntu 16) 下的实时服务器下的应用程序部署到托管根目录中，也没有使用此参数。

它是什么 ？它与 publicPath ( https://cli.vuejs.org/config/#publicPath )相同吗？

我是 Vue.js 新手，遇到了这个问题。

我在 App.vue 中有这段简单的代码

<div v-for="brand in response" v-bind:key="brand.BrandId">
    <router-link v-bind:to="{name: 'brand', params: {brandId: brand.BrandId } }">
        {{brand.Name}}
    </router-link>
</div>
<router-view />

router/index.js 路由数组项如下所示：

{
    path: '/brand/:brandId',
    name: 'brand',
    component: () => import('../views/BrandDetail.vue')
}

我收到了 API 的回复。它是一个有效的对象数组。菜单显示得很好。

我希望路由器视图在单击路由器链接时更新。它确实会更新 URL (#/brand/id)，但路由器视图不会更新。

还有其他硬编码的路由器链接。如果我去那里并返回到任何动态添加的路由器链接，它会按预期工作，但如果我单击一个动态路由器链接，然后单击另一个，则路由器视图会卡在第一个链接中。

我还尝试向密钥添加反应式数据源，但这没有帮助。

有人可以向我解释一下这是怎么回事吗？

我有一个在历史模式下使用 VUE 路由器的 VUE 应用程序，但似乎无法在我的生产服务器上运行。我已经使用文档中给出的设置设置了 .htaccess 文件：

  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]

这对于前端来说似乎工作得很好；又名（www.url.com/Anything/anything）似乎路由正确。

当我尝试路由到我的管理员时出现问题：

www.url.com/admin/dashboard 

这是在我的 index.js 中设置为带有子路由的路由，但我认为我还需要在 .htaccess 中设置一些特殊的内容，但我似乎找不到任何有关如何执行此操作的信息。预先感谢您的任何帮助。

我需要开发一个具有登录视图的服务器端身份验证的应用程序。如果我想使用Vue Router在登录和索引（受保护的视图）之间动态切换，我需要避免在成功身份验证之前登录视图下载（预取）索引，因为如果没有，服务器将用登录页面回答索引预取要求。

我试图在具有两条路由的原始 Vue Router 示例中实现此目的。家及周围。第一个被包含，第二个被延迟加载（但预取），这将是实际应用程序中的受保护页面。

为了避免预取，我已经尝试了我找到的所有 webpack 魔术注释，但预取仍然发生。

这是代码：

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",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about"*/ /* webpackMode: "lazy" */ /* webpackPrefetch: false */ /* webpackPreload: false …

• 我在用nuxt-community/router-module
• 它要求您创建一个router.js可以添加全局路由配置的文件
• 如何从该文件访问商店？

我使用 cli 安装了新的 vue 3 应用程序，其中还包含 vue 路由器。

在我的网站上，我已将构建的文件放入 www/dist 子文件夹中。然后在我的 php 索引文件中，我手动将所有 js/css 文件链接到 /dist 文件夹。

我在组件中有一个图像

<img class="discord-icon" src="@/assets/discord.png">

当我设置 publicHtml = '/dist' 时，即使显示图像，一切正常，但由于某种原因，我的主页从原始的“www.page.com”重定向到“www.page.com/dist”

我想在主页上有默认的“www.page.com”，但也有工作图像，我怎样才能实现这一点？

编辑：我的路由器配置（默认来自使用路由器手动 cli 安装）

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home
  }
]


const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

更新：在 vue Discord 上，我被建议为此创建 .htaccess，遗憾的是我不够熟练，无法创建一个，甚至不知道将其存储在哪个文件夹中。另外，因为我使用 php 框架（Nette），所以我已经有另一个了

这就是我现在让它工作的方式：

“publicPath: '/dist'” 和 “history: createWebHistory(process.env.BASE_URL)” 其中项目位于“/dist”文件夹中，因此页面为www.page.com/dist。所有工作但是。我访问“www.page.com”，它重定向到“/dist”，但是当查看 html 时，它不会生成“/dist/css/chunk-vendors.css”，因此所有导入的 css 都丢失了。但是当我点击刷新（直接进入www.page.com/dist）时， chunk-vendors.css 被加载。默认情况下，vendors.css 不在生成的index.html 中，所以我猜它是由js 完成的。所以我邪恶地想到，只需将vendors.css链接手动粘贴到我的生产index.html中，它就可以工作，尽管当直接转到/dist url时，我最终会加载此样式2次，哈哈。然后我有了更邪恶的想法，并更改为 'history: …

我在使用 TypeScript 的 VueJS 项目中遇到错误，其中我的 vue 文件被分割为 HTML、CSS、TS 和 vue。

我有这个错误：类型 '{ validate(): void; 上不存在属性 '$router' }'

这是我的文件的分割方式：

登录.vue：

<template src="./Login.html"></template>
<script src="./Login.ts"></script>
<style src="./Login.css"></style>

登录.html：

<div id="form" align="center" justify="center">

  <v-col sm="4" align="center" justify="center">
    <v-form ref="form" v-model="valid" lazy-validation>
      <v-text-field v-model="login" :label="$t('Username')" required></v-text-field>

      <v-text-field v-model="password" :label="$t('Password')" type="password" required></v-text-field>

      <v-btn color=primary class="mr-4" @click="validate">
        {{ $t('Login') }}
      </v-btn>

    </v-form>
  </v-col>
</div>

登录.ts：

export default {
    name: 'Login',
    data() {
        return {
            fields: {
                login: '',
                password: ''
            }
        }
    },
    methods: { …

所以我有一个 vue 路由器，对于其中一个视图，我想传递一个 Object 类型的 prop，但是当我传递该 prop 时，它最终不是作为一个对象，而是作为[object Object].

这是我设置此页面的路线的方法：

{
    path: '/blogpage/',
    name: 'BlogPage',
    component: () => import('../subviews/BlogPage.vue'),
    props: (route) => ({
        blog: route.params.blog,
        ...route.params
    })
  }

这是我想要去的视图：

<template>
    <div class="page" v-on:click="test">
        AJSFHDKOIFHNK
        {{blog}}
        <h1>{{ blog.title }}</h1>
    </div>
</template>

<script>
export default {
    name: 'BlogPage',
    props: {
        blog: Object,
    },
}
</script>

我的路由器链接的第一个标签到那里：

{
    path: '/blogpage/',
    name: 'BlogPage',
    component: () => import('../subviews/BlogPage.vue'),
    props: (route) => ({
        blog: route.params.blog,
        ...route.params
    })
  }

目前，我对博客页面使用虚拟数据，虚拟博客对象如下所示：

{
    title: 'Blog Post 1', …

我在目录中构建了一个 Vue JS 应用程序dist。为了运行，我使用http-server以下命令全局安装：

npm install -g http-server

我使用以下命令运行应用程序：

http-server dist

所以我可以访问该网站http://localhost:8080，它工作正常。但在我的应用程序中，我vue-router配置了历史记录模式，因此我应该访问类似 的 URL http://localhost:8080/page1，但问题是http-server返回 404：

curl -i http://localhost:8080/page1

HTTP/1.1 404 Not Found
accept-ranges: bytes
Date: Sat, 11 Sep 2021 12:41:53 GMT
Connection: keep-alive
Keep-Alive: timeout=5
Content-Length: 0

我如何解决它？

我有一个运行 Vue 3 和 vue-router 4 的 Quasar 应用程序

我的路线已设置完毕，并且在从组件模板导航时工作得很好

<router-link to="/route">Go to route</router-link>

不过，我希望能够通过我的方法访问路由器和路由。根据文档，我应该能够以某种方式访问​​路由器对象，this.$router，或路由器，或其他方式......但我似乎无法获得访问权限

我的整个单个文件组件看起来像

  <template>
    <q-page>
      <q-card>
        <q-form @submit="handleSubmit()" >
          <q-input v-model="param" />
          <q-btn label="submit" type="submit" />
        </q-form>
        <router-link to="/">Go to Foo</router-link> <!-- this works great -->
      </q-card>
    </q-page>
  </template>

  <script lang="ts">
  import { ref } from 'vue'

  export default {
    setup () {
      const param = ref(null);
      return { param }
    },
    methods: {
      async handleSubmit () {
         // do stuff
         // route somewhere
      }
    }
  } …