标签: vue-router

使用时

"vue": "^2.6.12" & "vue-router": "^3.5.1",

每次重新加载页面后我都会收到此警告：

[vue-router] In Vue Router 4, the v-slot API will by default wrap its content with an <a> element. Use the custom prop to remove this warning: <router-link v-slot="{ navigate, href }" custom></router-link>

我不清楚这个警告。为什么在不使用 vue-router v4 时收到此警告以及如何设置自定义 prop？

我在使用 vue 路由器时遇到问题。当我单击导航栏在视图/页面之间进行更改时，网站工作正常，但是当我尝试通过域/url 直接转到特定页面时，我通过 Firebase（托管网站的位置）收到错误消息：根index.html 中不存在该文件。

以下是路由中的 index.js 文件的代码：

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";
import Courses from "../views/Courses.vue";
import LandingPageTechSession from "../views/LandingPageTechSession.vue";
import VueMeta from "vue-meta";
Vue.use(VueMeta);

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/muddy-match",
    name: "MuddyMatch",
    component: MuddyMatch,
  },
  {
    path: "/courses",
    name: "Courses",
    component: Courses,
  },
  {
    path: "/techsession",
    name: "TechSession",
    component: LandingPageTechSession,
  },
];

const router = new VueRouter({
  mode: "history",
  base: …

我有一个 Vue 应用程序，它对应用程序负载进行一些本地存储和服务器检查，以确定最初将用户路由到哪里。

这是在应用程序的主入口组件中的created()钩子中

我的问题是，默认/路由的组件首先明显加载，然后服务器调用，所有发生的事情都会导致用户路由到正确的位置

如何延迟初始组件的渲染，直到我的应用程序的主组件的 create() 方法完成，然后有目的地将用户导航到正确的路线？

我有一个使用 vue 路由器的 vue 应用程序。我为登录路由实现了一个身份验证系统。如何让它在登录成功后自动重定向到用户最初想要访问的路线？

这是我的代码

import Vue from "vue";
import VueRouter, { RouteConfig } from "vue-router";
import Home from "../views/Home.vue";
import Collections from "../views/Collections.vue";
import Login from "../views/Login.vue";
import store from "../store/index";

Vue.use(VueRouter);

const routes: Array<RouteConfig> = [
  {
    path: "/login",
    name: "Login",
    component: Login,
  },
  {
    path: "/",
    name: "Home",
    component: Home,
  },

  {
    path: "/collections",
    name: "Collections",
    component: Collections,
    //meta: { requiresAuth: true }
  },
];

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

我有一个使用 Vue-Router 和 Vuex （商店）的应用程序。

在仪表板组件上，显示用户信息。Vue 从数据库中提取用户信息（异步）并将其推送到 Store。

现在，在我的子组件中，我通过商店访问此信息。问题是，在初始加载子组件时，存储中的用户条目为空。TypeError: $setup.user is null。现在，解决这个问题的一种方法是v-if在每个元素前面放置一个。然而，我发现这很整洁。

v-if我可以在每个 html 元素中添加一个吗？

用户.vue：

<template>
  <div>
    <div id="profile_content">
      <UserNavbar />
      <router-view :key="$route.fullPath" />
    </div>
  </div>
</template>

用户仪表板：

<template>
<div>
    <ProfileInformationCard>
      <span v-if="user">{{ user.name }}</span>
      <span v-if="user">{{ user.lastLogin }}</span>
    </ProfileInformationCard>
</div>
</template>

<script>
import _ from "lodash";
import { useStore } from "vuex" 
import { watch } from "vue" 

export default {
  setup(){
    const store = useStore()
    const user = store.state.user.currentUser

    watch(() => _.cloneDeep(store.state.user.currentUser), …

我目前正在从事 Vue 3 项目。

在 Pinia 商店中使用this.$router.push({})似乎不起作用。

我还尝试导入 useRouter -->import { useRouter } from "vue-router";来简单地使用 router.push，但似乎仍然不起作用。

我不知道可能是什么问题，也不知道应该使用什么来从 Pinia 商店中的操作中导航我的路线。

import { defineStore } from "pinia";
import axios from "axios";

export const SignupStore = defineStore("signup", {
  state: () => ({
    fullName: "",
    dob: "",
    email: "",
    password: "",
    passwordConfirm: "",
    gender: "",
    program: "",
    genderOptions: ["Male", "Female"],
    degreePrograms: ["Degree program", "HND program", "Masters program"],
    isSignupCorrect: false,
  }),

  actions: {
    async signup() {
      let dob = new Date(this.dob).toISOString().substring(0, …

我正在尝试使用 nuxt3 （“3.0.0-rc.3”）建立一个简单的动态链接，但无法访问动态 slug url。我关注了此页面，但它似乎对我不起作用： https ://nuxtjs.org/examples/routing/dynamic-pages

这是我的简单页面结构：

pages/
   index.vue
   category/
       _id.vue

当我尝试访问我的localhost:3000/category/test网站时，出现 404 错误页面，其中显示消息“找不到页面：/category/test”。

这是我的“index.vue”文件中的链接：

<NuxtLink to="/category/test">Test</NuxtLink>

这是我的“_id.vue”文件的内容：

<template>
  <div>
    <h1>Project: {{ $route }}</h1>
  </div>
</template>

<script>
export default {}
</script>

<style>
</style>

Laravel 9 使用 vite Vue 3、Vue-router 运行命令 vite build 并关闭 vite 服务器，浏览器 url 中的所有链接均获取 '/build/'

在代码中

<router-link to="/index">Index</router-link>
<router-link to="/">Main</router-link>
<router-view></router-view>

在浏览器中

投票配置

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue'

export default defineConfig({
    plugins: [
        vue(),
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

刀刃

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- Fonts -->
        <link href="https://fonts.bunny.net/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">

        @vite(['resources/css/app.css', 'resources/js/app.js'])
        <!-- Styles --> …

我已经在vue路由器的路由所使用的组件的已创建钩子上注册了“ beforeunload”事件。

我想调用此事件处理程序，以删除浏览器选项卡关闭或浏览器选项卡刷新或浏览器关闭上的用户。

在ComponentA上

created (){    
    window.addEventListener('beforeunload', () => {

        this.removeUser()

        return null
     })
}

嘲笑ComponentB

created (){    
    window.addEventListener('beforeunload', () => {

        this.removeUser()

        return null
     })
}

还有我的router.js

{
  path: '/staff/call/:session_key',
  name: 'Staff Call',
  component: ComponentA,
  meta: {auth: true}
},
{
  path: '/consumer/call/:session_key',
  name: 'Consumer Call',
  component: ComponentB
},

在这里，“ beforeunload”事件处理程序是随机触发的。那有时是触发它，有时却没有触发。我认为在触发时会发现任何模式，而在没有触发时会发现。

我在这里想念什么？

我似乎无法使用程序化导航传递参数，但路径会更改，但是对象参数为空。

main.js

import Vue from 'vue';
  import VueRouter from 'vue-router';

  import App from './App.vue';

  const Hello = { props: ['name'], 
  template: `<h1>Hello {{$route.params}}  </h1>`,

  };
  const World = { template: `<h1>World</h1>`};

  const routes = [
    { path: '/hello', component: Hello, props: true },
    { path: '/world', component: World }
  ];

  const router = new VueRouter({
    routes
  });

  Vue.use(VueRouter);

  new Vue({
    el: '#app',
    router,
    render: h => h(App)
  });

应用程序

<template>
  <div id="app">
   {{ msg }}
   <button @click="move">werwer</button>
       <router-view/>

  </div>
</template> …