为什么Vue路由器链接在Click上不起作用
Vue路由器在Click事件上不起作用的原因可能有以下几个方面：
- 没有使用正确的Vue路由器语法：Vue路由器（Vue Router）是Vue.js官方推出的前端路由管理器，用于实现SPA（Single Page Application）的导航和路由控制。在使用Vue路由器时，需要确保正确的语法和API使用。例如，使用
<router-link>来代替普通的<a>标签来导航到不同的路由。 - 缺少路由器实例的初始化：在使用Vue路由器之前，需要先创建并配置一个路由器实例。路由器实例需要传入一个包含路由配置的路由器选项对象，并且需要通过
Vue.use()来安装路由器插件。只有正确初始化了路由器实例，才能使得路由器链接在Click上起作用。 - 没有在Vue根实例中挂载路由器：Vue路由器需要在Vue根实例中挂载，才能使得路由器链接在Click上起作用。在Vue根实例中，需要通过
router选项将路由器实例挂载到根实例中。例如，使用new Vue({ router })来创建Vue根实例，并将路由器实例作为router选项传入。 - 使用了错误的路由模式：Vue路由器支持两种常用的路由模式，即
hash模式和history模式。hash模式使用URL的哈希部分（#）来模拟路由，适用于不支持HTML5 History API的浏览器；而history模式使用真实的URL路径，需要服务器的支持，并且在生产环境中需要进行相应的配置。如果选择了错误的路由模式，就可能导致路由器链接在Click上不起作用。
综上所述，要使Vue路由器链接在Click上起作用，需要注意正确使用Vue路由器语法，正确初始化路由器实例，将路由器实例挂载到Vue根实例中，并选择适合的路由模式。若有需要，可以参考腾讯云提供的相关文档和产品，例如腾讯云的云服务器（CVM）提供了方便的云计算资源托管服务。
相关·内容
1回答
我在Vue.js中使用了Nuxt.js。我添加了像这样的动态组件。 // pages/index.vue
<template>
<div class="filter-container">
<component v-for="item in buttons" :is="item" :key="item.id" :buttons="buttons" />
<span class="add-search" @click="add&#
浏览 42提问于2020-06-16得票数 1
回答已采纳
我正在审查Vue和它的路由器组件，尽管我在让路由器组件工作时遇到了一些问题。控制台出现以下错误：
未定义的ReferenceError:路由器未定义
大家好，
我正在将Vue和VueRouter导入到index.html中，并尽力阅读文档以使路由器初始化，但似乎无法工作。
在index.html中
<script type="module" src="/assets/js/main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue
浏览 1提问于2019-08-09得票数 2
我一直在学习VueMastery课程，偶然发现了一个意想不到的问题，我似乎无法解决自己。
在不使用全局路由器警卫的情况下，URL在这两种模式上通常都会更新。但是，一旦我将以下钩子添加到我的路由器(路由器/index.js)，我就不会收到任何错误，但是URL不会再更新了：
router.beforeEach((routeTo, routeFrom, next) => {
NProgress.start();
next();
});
router.afterEach((routeTo, routeFrom, next) => {
NProgress.done();
n
浏览 0提问于2020-03-20得票数 2
回答已采纳
我试图实现的是将Vue 3应用程序添加到现有的Rails应用程序中。因此，我的应用程序将是一个典型的Rails应用程序，直到加载路由/spa/*。在这种情况下，Rails的控制器将提供一个依赖于Webpack服务JS的布局。
首先，我将路由/spa/添加到我的routes.rb中，以便始终将其解析为一个为使用javascript_pack_tag的正确布局服务的控制器。
然后，我成功地在我的Rails 5.2 rails应用程序中安装和安装了Webpacker，而且它似乎工作正常，因为我已经用Vue路由器构建了一个简单的应用程序，并在单击链接时正确地呈现了几个组件。好吧，几乎..。
问题在于我
浏览 2提问于2021-01-25得票数 3
回答已采纳
所以Vue-Material文档()说可以创建一个填充了md-bottom-bar-item的md-bottom-bar，同时能够让md-bottom-bar-item表现得像一个<router-link>
他们的代码可以在“与Vue Router的无缝集成”下面看到(顺便说一句，这正是^^的意思)，我的代码是这样的：
<md-bottom-bar-item
id="messageRoute"
to="/Messages"
@click="stuff"
md-label="Notifi
浏览 0提问于2017-12-19得票数 1
我正在尝试更多地使用vuerouter。我已经设置好了所有的东西，甚至在一个外部脚本页面中我也放置了我的脚本。我正在使用x-template来改变视图，所以我不确定我遗漏了什么，我相信我已经准备好了所有步骤，但是我不能确定为什么我的路由器视图没有使用所选组件进行更新。 const oneTemplate = {
template: '#one',
data() {
return { title: 'oneTemplate' }
},
浏览 18提问于2019-09-02得票数 0
回答已采纳
1回答
我有以下vue3代码：
<template>
{{click}}
<ol>
<li v-for="item in items" :key="item" v-html="item"></li>
</ol>
</template>
<script setup>
const click = ref();
const items = [
'<p>text</p><a @click="click+1">click
浏览 5提问于2022-07-14得票数 -1
3回答
我有laravel Vue应用程序，它与chrome和firefox配合得很好。但它在Edge或IE11上不起作用，控制台在箭头函数上显示错误！？如何编译或编译成带有laravel和webpack的es5？您能显示webpack.mix.js的正确配置吗？tnx多值
浏览 0提问于2019-01-31得票数 3
1回答
我想在我的购物主题中使用Vue.js。所以在主题中添加了这段代码。但它不起作用。现在没有显示任何结果！我不确定问题出在哪里。有人能帮我解决这个简单的问题吗？谢谢 注意:我已经创建了一个test.html，并复制粘贴在下面的代码中。但它在简单的html文件上工作正常。但是为什么它在shopify上不起作用呢？ <script src="https://unpkg.com/vue"></script>
<div id="app">
{{ message }}
</div>
<script>
c
浏览 15提问于2021-11-01得票数 0
回答已采纳
你好，我有一个关于vue路由和树如何工作的问题。我有我的parrent路由器，我在同一层上有我的路由器视图和报头。
在我的路由器视图中，我有一些函数想要从报头触发到名为dashboard的路由
例如: header.vue
<a href="#" @click.prevent="update()"> click me to update dashboard </a>
dashboard.vue
<p> {{datafrom filldata}} </p>
methods: {
fillDataToP(
浏览 4提问于2018-08-21得票数 0
回答已采纳
2回答
我的路由器链路有问题。当我把它放在一个视图中时，它工作得很好，我有一个可点击的链接。但是当我把一个路由器链接放在一个组件中，内置于一个视图中时，路由器链接就不再起作用了:我想“只是”链接到一个项目的细节。 这项工作(resources/js/views/HomepageView.vue) <router-link :to="{ name: 'projects.show', params: { slug: slideshowProject.slug }}">
<a href="#" class="btn-sec
浏览 14提问于2019-01-18得票数 2
回答已采纳
我在一个网站上使用IDX页面。链接在网站页面上运行良好。但是网站的菜单、侧边栏和页脚链接在IDX pages 上不起作用。或者菜单和页脚中的任何其他外部链接在IDX页面上不起作用。
例如，我在视频图标的页脚中放置了一个链接。由于它在悬停时显示良好，但在单击时没有链接，因此在右键单击的新选项卡中打开时，它可以正常工作。
谁能知道问题出在哪里？为什么这些链接不起作用？
浏览 1提问于2014-12-04得票数 1
我刚开始研究电子vue，我正在设置vue路由器，但它似乎不起作用，甚至没有显示出任何错误。
这是我的代码
main.js
import { createApp } from 'vue'
import App from './App.vue'
import {createRouter, createWebHashHistory, createWebHistory} from "vue-router"
import test from "./components/test";
const router=createRouter(
浏览 8提问于2022-03-12得票数 0
回答已采纳
我试图从JAVASCRIPT文件中的路由器类创建一个对象，但发生了此错误 import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false;
Vue.config.devtools = false;
import Router from 'vue-router'
Vue.use(Router);
var router = new Router();
new Vue({
render: h => h(App),
}).$
浏览 35提问于2020-12-25得票数 0
回答已采纳
3回答
我有一个带li的ul。在li中有一个button。当我单击它时，它会向我显示一条消息。当我尝试这样做的时候：$("#myUl").append("<li> <div id="click">Click</div></li>");在新的li上不起作用，补充道！你能帮帮我吗?
浏览 1提问于2012-08-03得票数 1
1回答
我第一次尝试设置Vue路由器时遇到了麻烦。
路由器/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Services from '../components/Services'
import App from '../app'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Ap
浏览 2提问于2018-02-01得票数 1
回答已采纳
1回答
我的vue 3项目路由页面动画和转换不起作用 <template>
<app-header />
<router-view v-slot="{ Component }" :key="$route.fullPath">
<transition name="fade" mode="out-in">
<component :is="Component" />
</transition>
</r
浏览 47提问于2021-07-25得票数 0
1回答
我正在使用vue3和php。但不知何故我没有打开这一页。这是我的代码：app.js
import BootstrapVue3 from "bootstrap-vue-3";
import '../assets/sass/app.scss';
window.Vue = require('vue');
import { createApp } from 'vue';
import App from './App.vue';
import router from './routes.js';
cr
浏览 4提问于2022-11-09得票数 0
1回答
在访问任何页面之前，除了登录和注册之外；我希望使用导航卫士对用户进行身份验证。下面您可以看到我的vue-路由器代码。“这里”将被记录，但导航不会在之后的行中取消。如果用户未通过身份验证，则仍有可能访问//me路由。
我的路由器文件：
import { createRouter, createWebHistory } from "vue-router";
import axios from "axios";
import HomeView from "../views/HomeView.vue";
import RegisterView from
浏览 7提问于2022-06-14得票数 0
回答已采纳
谈到vue，我是个新手。因此，我遵循了本教程。其中我在“添加视图路由器”部分。
我做了所有的更改，并添加了他所做的(从创建视图文件夹和组件，创建路由器文件夹及其内部index.js，甚至导入)，然而当我尝试npm运行开发时，我的网站上什么也没有。
下面是我在路由器文件夹中的代码：
import {createRouter , createWebHistory} from 'vue-router'
import Dashboard from "../views/Dashboard.vue"
import Login from "../views/Login
浏览 7提问于2022-11-19得票数 0
回答已采纳
我在用Vue路由器做实验，我闻到了一股臭味。需要和社区联系看看我做得对不对。
在Vue路由器之前，我有一个组件作为父组件从它的子节点接收一个事件，并更新我的主要app data属性：
<number-pad v-on:button-click="updateTotal($event)"></number-pad>
别担心细节，但它起作用了。
当我把这个搬到Vue路由器的时候，它看起来会是这样的.
const pageOne = {
name: "page-one",
template: `
<div>
浏览 0提问于2018-08-25得票数 3
回答已采纳
我试图学习vue-路由器，我有一个问题的vue-cli3 +vue-路由器演示。
此演示程序使用vue create默认创建。我试图最小化演示，但它仍然不起作用。
我是main.js
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
Vue.config.productionTip = false
Vue.use(VueRouter)
const Foo = { template: '<div>foo&l
浏览 0提问于2019-09-01得票数 0
回答已采纳
我试图在页面加载时获得一个随机图像。我不明白为什么这不起作用。有没有人？它在将It作为小提琴运行时有效，但在我的vue-cli和它的dev服务器上不起作用。
<template>
<section>
<img v-bind:src="selectedImage" />
</section>
</template>
<script>
export default {
data: {
images: [
'http://via.placeholder.com/3
浏览 1提问于2017-12-23得票数 1
3回答
如何将外部脚本添加到vue组件？
、、、、
我非常需要你的帮助。我有一个Vue组件和端点，它为我提供了一个带有小菜单的脚本，该脚本包含一些操作。所以，在我的脚本加载后，它的动作在页面上不起作用，我不知道为什么。下面是示例代码：
<template>
<div id="menu"></div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js Ap
浏览 0提问于2018-11-09得票数 2
2回答
我在Vue中有一个带有click事件的菜单按钮。当按钮被点击时，它应该激活菜单本身。这是单击时激活菜单的父元素( toggleMenu函数使menuIsActive为true)。这部分工作正常：
<div class="navbar-item has-dropdown @click="toggleMenu">
<div class="navbar-link"></div>
<app-navmenu :class="{'is-active': menuIsActive}"/&
浏览 2提问于2018-03-16得票数 1
1回答
我在试用vue3时遇到了一些问题。 路由器是我的习惯。 import router from './router' 当我写的时候 createApp(App).use(Antd,VueAxios,axios,qs,router).mount('#app') 页面未加载正确的page.Vue路由器看起来无法工作，但当我写入 createApp(App).use(router,Antd,VueAxios,axios,qs).mount('#app') 起作用了！那为什么呢？ 代码：https://github.com/fangminghui/app
浏览 26提问于2020-11-25得票数 1
回答已采纳
2回答
我试着用引导-vue做一个导航条，它可以和vue路由器一起工作。导航栏运行正常，但当我单击一个导航栏项目时，它不会将我路由到页面。路由器在我整合引导-vue之前就已经开始工作了，所以我猜我遗漏了一些引导相关的东西？有什么想法吗？
Navbar.vue
<template>
<div>
<b-navbar
toggleable="lg"
type="light"
variant="light"
>
浏览 0提问于2019-08-30得票数 3
回答已采纳
这是一个来自superuser.com的交叉帖子，因为那里似乎没有人知道什么。
我最近用思科/Linksys RSV4000取代了一个濒临灭绝的dying路由器(DI-524)。我对这个设备真的很满意，但是当我的电缆调制解调器插上它时，我的下载速度就会下降1/3。当我把调制解调器直接插到我的桌面上时，我就可以下载30 5mb/s和5MB/S，但是通过路由器，我就可以下载20 5mb/ right。
当我们切换到Comcast时，我遇到了类似的问题，因为他们的boost服务在我们的Watchguard防火墙上的http代理上不起作用。所以我试着关闭路由器中的每一个选项，看看它是否有效果，但这并没
浏览 0提问于2009-08-21得票数 2
回答已采纳
在Vue路由器4之前，我使用了以下标记：
<router-link
:disabled="!ICanGo(item)"
:tag="!ICanGo(item) ? 'span' : 'a'"
:event="ICanGo(item) ? 'click' : ''"
:to="{ name: 'editUsuario', params: { id
浏览 4提问于2021-01-27得票数 12
回答已采纳
Click事件在firefox上不起作用，但它使用的是chrome。为什么？
setTimeout(function(){
$("#id").prev('div').find('button').find('div.classname').click(function(){
alert("Testing");
});
}, 3000);
浏览 0提问于2018-09-28得票数 0
回答已采纳
1回答
我是vue和vue的初学者，解释和举例会很好。我试图得到一个按钮，送你到一个外部网站。例如youtube.com。我现在有这个，但它不起作用。
<v-btn
color="primary"
text
@click="redirect(x.link)"
>
Share
</v-btn>
这是我的重定向
methods: {
redirect(link) {
window.location.href = link;
浏览 3提问于2020-01-17得票数 0
回答已采纳
1回答
如果用户再次尝试转到实际视图，我会尝试隐藏视图。创建切换效果。例如，显示/隐藏模式框。 我尝试了下面的代码： /* Root Instance */
const app = new Vue({
router,
watch: {
'$route' (to, from) {
if (to.path == from.path) {
alert();
router.go(-1);
} else {
alert(to.path + " != " + from.path);
浏览 12提问于2020-08-20得票数 1
1回答
我想为使用VueJ的客户端创建一个带有可视进度的入职表单。
这是一个多步骤的表单，它将使用状态管理来“记住”用户页面的位置。
你会选择什么?为什么？
选项1:使用多步模式的在进入下一步时意味着显示同一页面的不同html部分。
<!-- The Modal -->
<section>
<h3>Welcome!</h3>
<p>You are about to experience data collection bliss.</p>
<button @click="goToStep(
浏览 4提问于2017-10-06得票数 1
回答已采纳
我有一个非常恼人的问题，那就是我关于.vue类型flie的精彩片段。
假设我想自己在sublime中添加一个vue代码片段，并且我希望下面的vue the触发器只在vue类型的文件中工作。
我将这些代码添加到我的vue.sublime-snippet中
<snippet>
<content><![CDATA[
Some text
]]></content>
<tabTrigger>vue</tabTrigger>
<!-- Optional: Set a scope to li
浏览 2提问于2017-07-29得票数 2
我刚刚在我的组件上添加了一个路由器链路。其想法是，当用户单击此按钮时，它将转到我的路由器文件中的post视图。
我的路由器链路所在的组件：
<template>
<section>
<h2 class="mt-32 flex justify-center text-3xl ">The Happy Algorithm</h2>
<div class="ml-10 flex flex-row">
<div class="ml-64">
浏览 0提问于2020-07-22得票数 0
1回答
我有点矛盾...把手栏中的变量声明为{{hbs_variable}}，与Vue.js变量{{vue_varable}}相同，并且Vue在我的网站上不起作用(当它是从hbs查看变量，但试图自己理解它时)，如何解决这个问题？
浏览 10提问于2017-03-07得票数 3
回答已采纳
3回答
Google (GTM)有一个内置的触发器，名为“仅链接”。在我的VueJS应用程序中，使用Vue路由器，GTM在触发“仅链接”触发器之前触发一个“历史更改”事件。
(“历史更改”事件与页面查看事件无关)
正因为如此，Page Path GTM数据层变量(被认为是事件被触发的路径)与Click URL GTM数据层变量是相同的值，后者是<a/>标记中的href值。
例如：
用户在/support上
用户单击指向/about的链接
Vue路由器更新浏览器历史记录
历史更改事件触发并更新Google数据层的所有内部值(包括位置和页面路径)
“只链接”事件触发，Pag
浏览 0提问于2019-08-19得票数 1
1回答
如何将路由器传递给我的子组件。
我用这个做路由器
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
export default function () {
const Router = new VueRouter({
mode: 'history',
routes : [
{
path: '/',
beforeEnter: ifAuthenticated,
浏览 1提问于2019-02-13得票数 0
回答已采纳
1回答
我想要这样做，因为我可以交换登录页 <-> 注册页面，如果两者都成功了，那么我想去App
应用程序组件
logout(){
this.$navigateTo(Router["/Login"].component , {
clearHistory: true
}); //returns createcomment and doesnot navigate
}
但是，这只返回终端中的创建。
这与导航堆栈有关，但我不知道如何使其工作，因为这方面没有文档。
当我登录到登录页时，它可以工作，但在登录页上不起作用
logout(){
浏览 0提问于2019-07-12得票数 0
我正在尝试开发一个用fabricjs绘制形状的vue.js组件。绘制矩形后，它是可选择的，但不能用选择手柄调整大小或旋转，这不是我所期望的。我认为这与vue.js 3有关，因为一切都与vue.js 2兼容。 在this demo at JSFiddle中，角控制柄在矩形上不起作用，直到您将矩形与其他形状一起选择之后。 <div id="app">
<canvas ref="c"></canvas>
<div>
<button type="button" @click="add(
浏览 37提问于2020-10-13得票数 1
回答已采纳
我使用router-link动态创建了侧边栏导航列表。 <template>
<div class="sidebarListItem bg-light">
<router-link
v-for="route in $router.options.routes"
:key="route.path"
:to="route.path"
class="list-group-item list-group-item-action bg-
浏览 17提问于2021-06-23得票数 0
1回答
我正在学习Vue，我刚到了路由章节。我能够创建一个带有vue/cli的模板项目，并具有初始的路由器配置。这是路由器代码：
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'home',
component: Home,
},
{
path: '/about',
name: '
浏览 0提问于2018-12-03得票数 4
回答已采纳
我想在我的页面上添加一个按钮，以便它链接到路由器链接的下一页和上一页。我的路由器设置为： <li class="nav-item">
<router-link :to="{ name: 'testa' }">TestA</router-link>
</li>
<li class="nav-item">
<router-link :to="{ name
浏览 12提问于2021-01-27得票数 2
回答已采纳
2回答
Vue路由器在主Vue实例之前加载，但是要加载该路由器，我需要准备一些信息，然后将它们作为属性传递给该路由。在本例中，它是从主Vue实例传递到主屏幕的currentTime。
也许保持$Store上的所有东西都能解决这个问题，但目前项目还没有实现Vuex。我现在做不到。
有什么建议吗？
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './registerServiceWorker'
浏览 1提问于2019-10-22得票数 4
回答已采纳
为什么当上面的待办事项被删除时，交叉项下面的待办事项会被交叉？
例如：
item1 item2 item3 item4
交叉item3：
item1 item2 item3 X项目4
删除第2项：
item1 item3 item4 X
我的Vue密码做错了什么？我昨天才开始学习Vue，所以我的错误很可能是最基本的。
<div id="app">
<todo-list>
</todo-list>
</div>
<style>
.crossed {
text-dec
浏览 1提问于2020-06-08得票数 0
回答已采纳
1回答
我在呈现给模板的父组件中有一个数组，当我单击指向具有动态属性id的vue路由器的链接时，我需要打开一个新组件，其中只包含与id匹配的数组元素。我的代码不工作了。父组件： <template>
<div>
<button @click="addPost">Add</button>
<div v-for="item, index in arr" :key="item.id">
<p>{{item.title}}&l
浏览 11提问于2019-06-12得票数 1
1回答
我正在使用vue路由器创建一个单页应用程序。我有一个导航系统，点击菜单项可以将它们带到相应的页面。例如：
var pageView = require('./components/pageView.vue')
// Define some components
var Boards_page = Vue.extend( {
template: '<p>Boards</p>'
})
var Fantheories = Vue.extend( {
template: '<p>Character</
浏览 5提问于2016-05-01得票数 0
回答已采纳
我的项目使用Vue2和Vue路由器。我希望能够通过输入URL Stats来加载组件http://example.com/stats。
URL http://example.com/stats不工作，我被重定向到/，它加载App组件
<router-link :to="/stats">Go to stats</router-link>工作得很完美
我想知道这是Vue路由器问题还是服务器配置问题。我想提到的是，我在我的localhost和使用nGinx的服务器中都遇到了这个问题。
我怎么才能解决这个问题？
app.js：
const rout
浏览 3提问于2017-04-07得票数 2
回答已采纳
我一直在用Vue 3+ VueRouter做一个铬的扩展。
使用router.push功能，我试图将路由器视图内容更改为不同的组件，这意味着向用户显示不同的UI。
但是，不管我用什么方法，我都不能改变观点。
所以我的App.vue有路由器视图，我有两个组件，我想一次展示一个。
组件一是关于，第二部分是家。
我所做的就是创建了一个在onClick事件上触发的方法。
所以，第一个视图是Home (用户首先看到这个视图)。然后，当用户单击一个按钮时，它将交换UI组件，显示有关Page的内容。我使用router.push('/about')将UI组件交换为About.vue。但没有成功
浏览 42提问于2022-11-20得票数 0
回答已采纳
我想从一个页面导航到另一个页面的特定部分。因此，我在nuxt.config.js文件的路由器对象中添加了scrollBehavior函数，如下所示： router: {
scrollBehavior(to) {
if (to.hash) {
return {
selector: to.hash,
behavior: "smooth"
};
}
}
} 我的“pages”目录树如下所示： pages/
index.vue
parent.vue
r
浏览 123提问于2021-11-03得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
