Vue Router是一个用于单页面应用程序的路由库，设计用于Vue.js框架。
常量路线 = [ { 路径: '/:年份', 组件：导航， 孩子们： [ { 路径：''，名称：'测试'，组件：测试 } ] } ]; const routes = [ { path: '/:year', component: Nav, children: [ { path: '', name: 'test', component: Test } ] } ]; <!-- /2018/ --> <router-link :to="{name: 'test', params: {year: 2018}}"></router-link> 如果有孩子，我想删除添加到由 router-link 创建的路径中的尾部斜杠。 在 Vue-Router v4 中，您可以使用 strict 选项： const router = createRouter({ history: createWebHistory(), routes: [ ... ], strict: true, // applies to all routes }) 查看敏感和严格的路线选项。
我在 Vue 3 应用程序中使用动态 URL 常量路线 = [... { 路径：“/车辆/：id”， name: "车辆车辆页面", 组件：导入（ /* webpackChunkName: "
所以我使用Vue3。我不确定如何在各个 VUE 文件 javascript 部分中使用应用程序中其他页面的路由器。因此，如果我有一个 Register.vue 视图，即 /register 中的
我使用 Nuxt3 和 Composition API。 当从 bakset 移动到 order 时，basket 正在使用 router.push，并且正在翻转参数。如何从订单中获取这些参数？在 nuxt2 版本中，哟...
vue-router useRouter 在构建库组件时不起作用
我正在构建一个 Vue3 npm 组件库，希望我可以使用 vue-router 的 useRouter 访问当前路由器，并且它将由导入我的任何 vue 应用程序自动提供
Quasar Vue Router 解析名为route的href
我正在尝试使用 vue router 构建 href 链接 我在routes.js中有以下内容 常量路由 = [ { 小路： ”/”， 组件：() => import("layouts/MainLayout.vue")...
我有一个带有 REST 端点的 Spring Boot 应用程序，还有一个 VueJS 应用程序（以及一些 Vue 路由器逻辑）。问题是，每当我点击 http://localhost:8080/information 时，我...
我使用 Vue router 4 创建了一个新的 Vue 3 应用程序。 当我通过 访问链接时，它会打开页面，但是当我直接打开链接时，它会显示未找到错误。 { 不是芙...
vue-router 中有 router.reload 吗？
我在这个拉取请求中看到： 添加 router.reload() 使用当前路径重新加载并再次调用数据挂钩 但是当我尝试从 Vue 组件发出以下命令时： this.$router.reload() 我明白了...
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 过渡