Vue Router是一个用于单页面应用程序的路由库，设计用于Vue.js框架。
我正在尝试使用 Vue-Router 在我的新项目中对 URL 进行模式化，以便它们看起来就像现有（非 Vue）应用程序中的 URL 一样。现有的应用程序 URL 如下所示： /#!第1页 /＃！第2页 我的Vue
无法在 Nuxt 2 应用程序上验证 Stripe 的域名（Apple Pay、Google Pay 付款方式）
Nuxt 2 应用程序，带有 vue-router 的基本选项。 根据Stripe的说明，我将域名验证文件放在/static/.well-known/apple-developer-merchantid-domain-association f...
常量路线 = [ { 路径: '/:年份', 组件：导航， 孩子们： [ { 路径：''，名称：'测试'，组件：测试 } ] } ]; 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）的多语言应用程序，我想使用查询参数实现语言切换....