Vue Router是一个用于单页面应用程序的路由库，设计用于Vue.js框架。
Vue.js / Vue 路由器 - 如果我使用 cdn，如何从 url 中删除 hashbang #？
我无法使用带有 CDN 的 vue 路由器从 url 中删除 hashbang #。例如我有 url example.com/#/about 我想把它做成这样： example.com/about 我尝试更改 VueRouter.createWebHashHist...
useRoute().params 在初始加载时为空，但在刷新后可以工作
组件#1：包含一个点击函数，将新的 id 推送到路由中，如下所示： 组件#1：包含一个点击函数，将新的 id 推送到路由中，如下所示： <template> <div class="p-4 flex "> <div> <img :src="author.profileImage" alt="" class="w-10 h-10 rounded-full" /> </div> <div class="ml-3"> <span class="font-medium text-gray-800 dark:text-white"> {{author.name}}</span> <span class="ml-3 text-sm font-medium text-gray-400"> <NuxtLink to="#"> {{ author.handle }} </NuxtLink> . {{ props.tweet.postedAtHuman }} </span> <p v-if="props.tweet.replyTo" class="text-sm"> <span class="text-gray-500"> Replying to </span> <span @click="doSomething(replyToTweetUrl)" class="text-blue-400"> {{ props.tweet.replyTo.author.handle }} </span> </p> </div> </div> </template> <script setup> const props = defineProps({ tweet: { type: Object, required: true, }, }); const author = props.tweet.author; const { setTweetIdUrl ,tweetIdUrl } = useUrls(); console.log(props.tweet.replyTo?.id) const replyToTweetUrl = computed(() => `/status/${props.tweet.replyTo?.id}`) const router = useRouter(); async function doSomething(replyToTweetUrl) { console.log("ldsùfez "+tweetIdUrl.value) tweetIdUrl.value = replyToTweetUrl console.log("ldsùfez 2 "+tweetIdUrl.value) await router.push(replyToTweetUrl); } </script> 组件 #2 是 status/[id].vue <template> <div> <MainSection title="Tweet" :loading="loading"> <Head> <Title> </Title> </Head> <TweetDetails :user="user" :tweet="tweet"/> </MainSection> </div> </template> <script setup> const loading = ref(false); const { getTweetById } = useTweets(); const tweet = ref(null); async function getTweet() { loading.value = true; try { // Use nextTick to ensure the DOM is updated await nextTick(); //const response = await getTweetById(getTweetIdFromRoute()); const tweetId = useRoute().params.id; const response = await getTweetById(tweetId); tweet.value = response.tweet; console.log(response); } catch (error) { console.log(error); } finally { loading.value = false; } } const {useAuthUser} = useAuth() const user = useAuthUser() onBeforeMount(() => { getTweet(); }); </script> 我需要在单击该路由的链接后立即从该路由获取 id，但相反，它在第一次加载时返回一个空对象（整个 useRoute 是空的），除非我手动刷新页面，知道问题是什么可能 ？请帮忙！ useRoute 只能在设置上下文中使用（即组件创建的钩子）。 <script setup> const tweetId = useRoute().params.id; async function getTweet() { // can use tweetId here ... } 此外，如果您使用这样的代码，还有比 onBeforeMounted 更好的生命周期钩子可供使用： // Use nextTick to ensure the DOM is updated await nextTick(); 你基本上是在等待 mounted 钩子发生，这是在 DOM 渲染之后发生的钩子。所以只需使用 mounted 钩子
我在我的项目对象中添加了一个链接 项目： [ { icon: '仪表板' text: '首页', link: '/'}, { icon: '仪表板' text: '账户', link: '/account'}, ] 我应该把 router-link 组件放在哪里？
router-link 与 vue 和 vuetify 的混淆
如何使用预定义模板来使用 vue-router： https://vuetifyjs.com/examples/layouts/google-contacts 我在我的项目对象中添加了一个链接 项目： [{ icon: '仪表板' text: 'Hom...
Nuxt3 自定义路由破坏了 vue-router 和 <nuxt-link> 实例
我有一个 Nuxt3 应用程序，当前由基本上采用以下格式的页面组成： 页数/ |--index.vue |-- 测试目录/ | |-- [slug].vue | |-- 测试.vue | |--index.vue 我...
我尝试在我的 Vue 项目中使用 Vue-router。 我用 npm install vue-router@latest 安装了它。 我现在的问题是它不起作用 我的 router.js 文件如下所示： 导入 Vue ...
我正在尝试使用下面的代码来获取当前路线。 从 'vue-router' 导入 { useRoute } const 路由 = useRoute(); console.log(JSON.stringify(route)); console.log(路由.路径); 但我你...
使用 Vuetify v-btn 和 Vue router 在新窗口中打开链接
最新版本的 Vue Router 允许在新选项卡中打开链接，例如下列 链接文字 Vue Router 的最新版本允许在新选项卡中打开链接，例如以下 <router-link :to="{ name: 'fooRoute'}" target="_blank"> Link Text </router-link> 正确渲染 <a target="_blank">。 但是，这似乎不适用于 Vuetify v-btn，它支持路由器路径，例如，如果我们想使用图标。 <v-btn icon :to="{ name: 'fooRoute'}" target="_blank"> <v-icon>window</v-icon> Link Text </v-btn> 尽管组件呈现 <a>，但没有 target="_blank" 属性。我们怎样才能做到这一点？ 尝试以下代码片段 <v-btn icon href="/fooRoute" target="_blank"> <v-icon>window</v-icon> Link Text </v-btn> 要打开 new tab 或 external link，请使用 href 属性而不是 to，例如： <v-btn href="https://letesend.com/" target="_blank" icon > <v-icon>window</v-icon> Link Text </v-btn> 如果您绝对必须使用“:to”绑定（就像在我们的项目中，链接是 v-for 的一部分，没有对外部路由进行特殊处理），那么可以使用 Vue 默认路由来匹配以“http”开头的所有内容，这是一个解决方法”。将其添加为内部路由之后的最后一条规则，但不要在包罗万象的 404 路由之后添加（与 * 匹配） { // This is a hack to use :to tag for absolute paths. path: "/http*", beforeEnter: to => { window.open(to.fullPath.substring(1), '_blank'); } 然后在您的组件中添加 :to 标记以使用该值。例如：在我的项目中，我使用以下对象中的值“route” { title: "Help", detail: "Get online help and documentation.", icon: "mdi-help", color: "success darken-2", route: "https://www.confluence.myorg.com" } 像这样 <v-btn :color="l.color" text :to="l.route"> 向路由器对象添加目标对我有用： <v-btn :to="{ name: 'Edition', params: { id: item.id }, target: '_blank'}" > </v-btn> 但它不适用于 @click 和 $router.push
如何使用查询参数（例如“?lang=en”）更改 Vue.js 应用程序中的语言？
我正在开发一个 Vue.js 应用程序，使用 Pinia 进行状态管理。我有一个包含三种语言（EN、RU、TJ）的多语言应用程序，我想使用查询参数实现语言切换....
所以我有一个使用 Vue 和 Vue Router 的 SPA。它的设置类似于 iOS 应用程序，当您深入单击视图时，导航栏中的标题会发生变化。现在我已经将其硬编码在 paths.js 文件中......
我有一个带有转换的包装组件： // 包装器.vue 我有一个带有转换的包装组件： // Wrapper.vue <template> <transition appear mode="out-in" enter-active-class="animate__animated animate__fadeIn animate__faster" leave-active-class="animate__animated animate__fadeOut animate__faster" > <div :key="$route.path"> <slot /> </div> </transition> </template> 然后，我使用路由器中的一些组件填充默认插槽，如下所示： // Page.vue <template> <Wrapper> <router-view v-slot="{ Component }"> <component :is="Component" /> </router-view> </Wrapper> </template 我越来越 [Vue Router warn]: <router-view> can no longer be used directly inside <transition> or <keep-alive>.警告，这看起来很奇怪，因为我使用了正确的语法恕我直言。这是有意的吗？如果是的话，我错过了什么？ 注意：它工作正常，我只是不喜欢看警告:) 编辑：更多上下文 - 我正在尝试为桌面和移动设备创建包装器，而桌面设备应该具有上述转换。移动设备包装器的完成方式完全不同，此处不相关。 警告在这种情况下不应该显示，但只有当“router-view”是“transition”或“keep-alive”组件的direct子组件时才显示。 该错误已在此处报告：https://github.com/vuejs/router/issues/1306 根据官方指南，您应该在<transition> or <keep-alive>内使用<RouterView />，反之亦然不适用。 <router-view v-slot="{ Component, route }"> <transition name="fade"> <component :is="Component" :key="route.path" /> </transition> </router-view> <router-view>公开了一个v-slot API，主要是用<transition>, <keep-alive>组件包装你的路由组件。 更新： 计算属性可能对这种情况有帮助。很难，我不知道你是如何为小型设备实现代码的。这是一种方法... <script> function isSmallDevice() { /* code for checking device resolution */ return <Boolean> } export default { computed: { setTransitionProperty: function () { return isSmallDevice ? '' : 'fade' } } } </script> <router-view v-slot="{ Component, route }"> <transition :name="setTransitionProperty" mode="out-in"> <template #default> <component :is="Component" :key="route.meta.usePathKey ? route.path : undefined" /> </template> <template #fallback> Loading... </template> </transition> </router-view> 另一种方法可能是条件渲染，使用 v-if 和 v-else 指令。 从Vue3的官方文档来看，应该是这样的： <router-view v-slot="{ Component }"> <Transition name="slide-fade"> <component :is="Component" /> </Transition> </router-view> 转换名称在<style>部分中使用，如下所示： <style> .slide-fade-enter-active { transition: all 0.3s ease; } .slide-fade-leave-active { transition: all 0.1s cubic-bezier(1, 0.5, 0.8, 1); } .slide-fade-enter-from, .slide-fade-leave-to { transform: translateX(-10px); opacity: 0; } </style> 了解更多信息Vue3 过渡
vue-router 重定向到登录。即使路径不受保护，它也会将我重定向到登录页面
导入{ 创建路由器， 创建网络历史 来自“vue-router”； 从“../views/Home.vue”导入主页； 从“../views/public.vue”导入公共页面； 常量路由器 =
我已经解决这个问题几个星期了，除了 stackoverflow 和 vue-router 自己的 github 问题上的一些死胡同之外，我似乎在任何地方都找不到任何信息。 我正在尝试...
Active 类仅适用于主路由，不适用于子路由 子路由是动态且可选的 这是我的页面目录 导航栏.vue Active 类仅适用于主路由，不适用于子路由 子路由是动态且可选的 这是我的页面目录 NavBar.vue <nav> <ul class="flex flex-wrap space-x-5 py-4 text-sm text-slate-600"> <li> <NuxtLink active-class="text-slate-700 font-medium" to="/feed" class="leading-none tracking-wide hover:underline hover:underline-offset-2" >Ana səhifə </NuxtLink> </li> <li>|</li> <li v-for="route in routes" :key="route.name"> <NuxtLink active-class="text-slate-700 font-medium" :to="`/flows/${route.slug}`" class="leading-none tracking-wide hover:underline hover:underline-offset-2" >{{ route.name }} </NuxtLink> </li> </ul> </nav> app.vue <template> <div class="min-h-screen bg-slate-100"> <BlogHeader /> <NavBar :routes="routes" /> <div class="mx-auto mt-5 grid max-w-6xl grid-cols-12 space-x-3 px-5 pb-10"> <div class="col-span-8"><NuxtPage /></div> <div class="col-span-4 w-full bg-white px-3 py-2"></div> </div> </div> </template> 我们先简化一下目录结构。您需要有一个与相同目录级别的目录具有相同名称的.vue文件。您需要在该 .vue 文件中包含 <NuxtPage />。只有这样才真正满足<NuxtLink/>所要求的嵌套目录结构。 - pages - index.vue - folder1/ - index.vue - folder2/ - index.vue - folder2.vue //same level with /folder2 !!! - folder1.vue //same level with /folder1 !!! 在folder1.vue和folder2.vue中： <template> <NuxtPage /> </template>
我对 Vue 3 路由器很陌生，所以真的需要帮助。 我正在尝试通过路由器链接传递道具。 所以，我有一个组件 Post，其中支柱是一个对象。 后vue 导出默认
我正在从 Vue Router v3 迁移到 Vue Router v4，并遇到了一个意外的问题，它破坏了我的应用程序中的很多逻辑 - 也许有人遇到过它并且知道一个好的解决方案。 在 Vue 路由器中...
SocketIo - 每次访问 routerview 页面时都会添加额外的事件侦听器
我有一个 vue3 应用程序，其中有一个主布局和使用 routerviews 嵌入其中的页面。 我遇到的问题是，每次我进入使用 socketIO eventlistene 的 routerview...
我的 nginx 配置如下： 服务器 { 服务器名称 my-website.com； 地点 / { proxy_pass http://192.168.1.128:5367; } 监听 443 ssl； # 由 Certbot 管理 ...
如何在 [email protected] (Vue3) 中使用 createAsyncComponent？
当我像这样填写 createRouter() 中的组件字段时： { 路径: '/文章/帖子', name: '文章帖子', 组件：defineAsyncComponent({ 加载器：() => import('@/views/arti...
如何使用Vue-Router在Vue中设置查询参数而不需要重新加载组件
我正在尝试使用 Vue-Router 设置查询参数，而无需在 Vue 中重新加载组件。但使用下面的代码会重新加载组件： this.$router.replace({query: this.filters}); 我们怎样才能...