如何在Vue prototype中访问路由对象？
在Vue中，可以通过Vue.prototype来扩展Vue实例的原型，从而在组件中访问路由对象。下面是一个示例：
- 首先，在Vue的入口文件（通常是main.js）中导入Vue和Vue Router：
import Vue from 'vue'
import VueRouter from 'vue-router'- 然后，使用Vue.use()方法来安装Vue Router插件：
Vue.use(VueRouter)- 接下来，创建一个Vue Router实例，并配置路由：
const router = new VueRouter({
routes: [
// 路由配置
]
})- 现在，你可以通过Vue.prototype来扩展Vue实例的原型，将路由对象添加到原型上：
Vue.prototype.$router = router- 最后，在组件中就可以通过this.$router来访问路由对象了。例如，在一个组件的方法中使用路由对象：
methods: {
goToHome() {
this.$router.push('/home')
}
}在上面的示例中，我们通过Vue.prototype将路由对象添加到了Vue实例的原型上，这样在组件中就可以通过this.$router来访问路由对象了。通过路由对象，我们可以进行路由导航、获取当前路由信息等操作。
推荐的腾讯云相关产品：腾讯云云服务器（CVM），产品介绍链接地址：https://cloud.tencent.com/product/cvm
相关·内容
我编写了一个Vue.js插件，用于全局访问Vue函数：
const MyPlugin = {
install (Vue, options) {
Vue.myFunction = function () {
console.log('Test')
}
}
}
export default { MyPlugin }
并将其包含在main.js文件中：
import MyPlugin from './plugins/my-plugin.js'
Vue.use(MyPlugin)
但是，当我尝试从这样的Vue组件调用myFu
浏览 0提问于2019-02-11得票数 2
回答已采纳
1回答
使用vue.js和vue-router，我希望拥有应用程序的全局状态属性(在组件之间共享的东西)，并根据此属性的值阻止路由。 例如，如果状态未初始化，我希望将所有路由重定向到根"/“。我尝试过以下几种方法： Vue.use(Router)
const router = new Router({
routes: routes
})
// global status property
Vue.prototype.$isInitialized = false
router.beforeEach((to, from, next) => {
if (!this.$i
浏览 14提问于2019-03-02得票数 0
我需要用于错误的全局变量。但我不想为每个组件都设置输入变量。如果没有输入变量，如何在组件ABC中查看$errors？
(without <abc :errors="$errors"></abc>)
index.js：
Vue.prototype.$errors = {};
new Vue({
el: '#app',
render: h => h(App),
}
App.vue：
...
name: 'App',
components: {
ABC
}
...
methods:{
getContent
浏览 2提问于2019-11-21得票数 4
1回答
有没有办法在路由器(router.js)文件中使用Vuesax $vs.loading？当我尝试$vs.loading时，它失败了，出现了未定义的错误，我也尝试了Vue.prototype.$vs.loading，但仍然没有成功。
浏览 8提问于2020-05-07得票数 0
1回答
我写了一个插件：
var MyCoolVuePlugin = {
install(Vue) {
Vue.prototype.doStuff = function() {
console.log("I'm a useless plugin")
}
}
}
export default MyCoolVuePlugin;
在我的main.js中，我的前端启动并创建了Vue实例，我包括了我的插件：
import Vue from 'vue';
import App from './
浏览 1提问于2018-05-31得票数 0
回答已采纳
我正在尝试使用prototype为数据中定义的空对象设置一个属性，但我得到一个错误，即该对象未定义，当我使用"prototype“时，我看到错误，我必须做什么？ 这适用于vue@2.6.10，也使用vue-router@3.1.3和vuex@3.1.1。下面的代码是导入到另一个中的组件的一部分。 <template>
<input class="input" v-model="RealName" placeholder="Your Name"/>
...
</template>
<scr
浏览 26提问于2019-09-03得票数 0
回答已采纳
有人能告诉我是否有一种方法可以直接访问路由对象中的路由参数吗?我需要基于路由对象的不同组件。
router.map({
'/dashboard/*': {
component: Home
},
'/dashboard/:module': {
component: Module,
subRoutes: {
'/': {
component: require('./components/'+this.$route.params.module+'.vue')
浏览 1提问于2016-09-28得票数 0
回答已采纳
我已经设置了一个vue原型
Vue.prototype.$preventAccess = function (role ) {
if(role === this.$store.state.role) {
// do some stuff
}
}
然而，当我尝试在外部模块(prevent.js)中使用它时，这是我的主要入口点
import store from '@store/store';
import Vue from 'vue';
export default function log({ next, to }) {
console.log(Vu
浏览 1提问于2019-03-08得票数 0
因此，在我的main.js文件中，我有以下设置：
Vue.prototype.api_url = 'http://localhost'
在我的一个组件中：dashboard.vue
我正在使用beforeRouteEnter
export default {
data() {
return {
}
},
beforeRouteEnter (to, from, next) {
axios.post(this.api_url + '/dashboard')
}}}
但是，我得到了一个TypeError: Cannot read propert
浏览 0提问于2020-07-10得票数 0
基本上，我想使用我自己的商店内的vue安装和vue组件，我添加通过我的vue插件。
我发现我可以在实际安装函数中使用vuex，并完成所有vuex可以完成的操作，但我似乎无法将它传递给我的自定义组件。
在我的“证监会”中，还有其他方法可以在插件中添加全球事件吗？
import MyComponent from './MyComponent.vue'
import MySecondComponentfrom './MySecondComponent.vue'
import Vuex from 'vuex'
import store from '
浏览 7提问于2022-01-22得票数 2
回答已采纳
@tl;dr
我希望在不使用类型记录中的自组织/提供程序的情况下扩展React组件。
好吧，这是交易..。
在我工作的地方，我们曾经和Vue和普通JS一起工作.然后我们决定迁移到打字稿上.
技术我们使用：- React Typescript - Redux - Redux-Saga
问题是，在Vue，我们可以声明如下：
Vue.use(Auth)
在每个.vue文件中，我们可以在脚本标记中调用以下内容：
this.$auth
并有权使用授权方法。
我想做的是..。创建ReactComponent的扩展，其中我已经创建了大多数组件将使用的一些方法.类似于：
//检查用户是否经过身份验证，如
浏览 2提问于2019-04-29得票数 0
我正在尝试在TypeScript插件中使用公共publicRuntimeConfig，但没有成功。对于JS插件，我没有任何问题。但是现在我真的被卡住了，我想我没有看对地方。 问题是如何在TypeScript插件中访问此配置？ 这是我的nuxt.config.js： export default {
ssr: false,
...
publicRuntimeConfig: {
baseURL: 'http://localhost:3000'
},
} 我的插件： import Vue from 'vue'
浏览 130提问于2021-06-15得票数 0
回答已采纳
我目前正在构建一个vue js应用程序，它使用插件来处理google analytics事件，并且我想实现timing_complete事件来获得关于不同页面加载速度的数据。该应用程序使用vue路由器通过路由器视图标记来呈现内容。
插入代码如下：
var Analytics = function(){}
let Router
let Vue
Analytics.prototype.install(_Vue, _config={}, _Router) {
Vue = _Vue
Router = _Router
Vue.$analytics = Vue.pro
浏览 32提问于2021-02-17得票数 0
1回答
我似乎无法在vue项目中使用axios，因为它意味着当我尝试在Home.vue文件中使用axios时没有定义'axios‘。我在配置main.js的地方做错了什么吗？还是我遗漏了一些需要添加的东西？下面是我为main.js编写的代码，它展示了我如何在我的项目中添加axios。
import Vue from 'vue';
import GSignInButton from 'vue-google-signin-button';
import ElementUI from 'element-ui';
import axios from &#
浏览 4提问于2021-04-26得票数 0
1回答
我对Vue.js还比较陌生，但现在我坚持了一个可能很愚蠢的简单问题。
我有两个文件，一个用于路线，一个用于插件。
auth.js
export default {
install: (Vue, options) => {
Vue.prototype.$auth = {
login: (email, password) => {
...
}
};
}
};
和router.js
import Vue from 'vue'
import R
浏览 0提问于2018-03-02得票数 1
回答已采纳
如何在自定义Vue原型中访问$route对象，类似于.$route？ //main.js
Vue.prototype['$notify'] = params => {
//console.log('this', this) undefined
console.log('Vue.prototype', Vue.prototype)
/* console shows among other valid properties:
$route: [Exception: TypeError: Cannot read prop
浏览 43提问于2019-12-12得票数 1
回答已采纳
我正在与一个中型项目使用Vuejs作为前端。我正在探索的封装/分离通用方法的选项可以在许多组件中使用，包括mixins方法和插件方法。
Mixin逼近
我必须在每个组件(文件)中编写一个导入语句，在其中我想要使用mixin方法。这是否增加了最终文件大小，因为混合文件将在多个地方导入？我可以在mixin方法中使用this。
插件方法
我可以用Vue.use(MyPlugin)全局安装插件，并在任何组件中使用插件，而无需在每个组件中导入插件。
缺点:我无法在插件方法中使用this[field]。我必须传递调用组件vm的实例才能使用这些方法。
编辑1-包括扩展方法
扩展方法
我可以在多个其他组件中使
浏览 3提问于2016-07-04得票数 9
2回答
我有过
当我在car details页面中时，这些简单的路由/URL
http://localhost:8080/car/1
我正在使用vue2；检查我是否在car页面上的最佳方法是什么？
我通常
会检查第一段的URL，但我不确定这是否是最好的未来证明方法。
问题
我应该使用JS来检测我是哪一页吗？
我应该使用Vue功能来访问路由器对象吗？
一个人为什么要选择而不是另一个呢？
浏览 4提问于2022-09-15得票数 1
我正在尝试理解中的解决方案。该解决方案允许用户跟踪当前路由中的前一个路由。
下面是我试图理解的Vue代码片段。如果我正确理解，next将接受一个回调函数，该回调函数接收当前组件的vue实例。然后，我们将这个vue实例的prevRoute数据属性设置为from。这个解释正确吗？如果没有，究竟发生了什么？
如果有人也能对Vue API在幕后做什么添加一个简短的解释，这对我理解代码片段也很有帮助。
...
data() {
return {
...
prevRoute: null
}
},
beforeRouteEnter(to, from, next) {
next(vm =&
浏览 0提问于2019-08-07得票数 2
回答已采纳
1回答
我在引用、更新和访问子组件中定义为"Vue.prototype.$redirectObj“的全局对象时遇到问题。
main.js
Vue.prototype.$auth0Instance = new Auth0CLS();
Vue.prototype.$redirectObj = {
path: "/foo/bar"
}
------------------------------------------------------
component_sign_up.vue
<div @click="signInWithAuth0">
浏览 16提问于2019-08-02得票数 0
3回答
我正在使用nuxt.js进行一个项目，我在应用程序的上下文中注入一个函数，如官方文档中所建议的那样
但是，当我试图调用道具验证内部的函数时，我会得到一个错误。
/plugins/check-props.js
import Vue from 'vue'
Vue.prototype.$checkProps = function(value, arr) {
return arr.indexOf(value) !== -1
}
在组件vue中
export default {
props: {
color: {
type: String,
v
浏览 0提问于2019-05-16得票数 3
回答已采纳
1回答
我正在尝试在Vue的JointJS中定义一个自定义连接器。虽然我不认为这真的是JointJS或Vue的问题，但我对Javascript模块在这种情况下是如何工作的缺乏理解…… 我有以下代码，它似乎与文档(https://resources.jointjs.com/docs/jointjs/v3.3/joint.html#connectors.custom)相匹配： import Vue from 'vue';
let joint = Vue.joint;
joint.connectors = joint.connectors || {};
joint.connectors
浏览 48提问于2021-08-17得票数 0
回答已采纳
我一直在和Vue，TypeScript和Axios战斗，我无法找到一个令人满意的解决方案。
大多数指南都会告诉你这样做：
Main.ts
import axios from 'axios';
Vue.prototype.$http = axios;
然后使用$http。TypeScript不喜欢这样：
属性'$http‘在CombinedVueInstance类型中不存在
如何在全局范围内注册axios并避免任何TypeScript错误？
基于下面的@GentlemanCrow答案，我在根目录中创建了一个文件，名为：
axios-plugin.d.ts
impo
浏览 0提问于2019-07-02得票数 2
回答已采纳
1回答
我用vue-cli 3创建了一个项目，所以我运行：
>vue create my-app;
>cd my-app
>vue add axios
在my \src\plugins\文件axios.js中使用以下代码创建vue：
"use strict";
import Vue from 'vue';
import axios from "axios";
// Full config: https://github.com/axios/axios#request-config
// axios.defaults.baseURL
浏览 1提问于2018-10-23得票数 7
回答已采纳
我想通过VUE的功能传递数据到一个新的页面上点击一个按钮。我试着用路由器方法做这件事，但是我不能发送数组，它只允许我发送一个字符串。 this.$router.push({
name: "SalesInvoice",
params: { SalesInvoice: this.stockmaster }
}); 这个东西不工作，因为stockmaster是一个数组。 this.$router.push({
name: "SalesInvoice",
params: { SalesInvoice: "abc" }
浏览 159提问于2020-01-07得票数 5
回答已采纳
我在vue prototype中声明了$bus来访问全局，但是得到了这个错误
Property `prototype` does not exist on type vue.
可以帮助我如何使用typescript进行声明吗？Vue版本为3。
浏览 50提问于2021-05-31得票数 0
我通过Vue UI依赖项安装将Axios添加到Vue应用程序中。我希望通过以下方法访问组件中的Axios
this.$http.myHTTPmethod
因此，我根据这些文档创建了http.js。
import axios from "axios";
const devInstance = createInstance("http://localhost:3000");
const productionInstance = createInstance("http://localhost:3000"); // will change late
浏览 0提问于2019-03-13得票数 2
回答已采纳
这个应用程序并不复杂。我正在尝试创建一个简单的商店(不热衷于使用Vuex来实现这种功能)，它应该协调服务器请求，并确保整个应用程序都有一个真实的来源。
store.js
import Vue from "vue"
import axios from "axios"
class Store {
items = []
constructor() {
this.fetchData()
}
fetchData() {
axios
.get("/api/items")
.then(respons
浏览 0提问于2020-02-05得票数 4
我已经创建了一个离子vue 3标签启动应用程序。I试图以编程方式将选项卡从一个选项卡切换到另一个选项卡
这是我的情况
// in Tab1.vue page
setup(props, context) {
function moveToTab3(){
// here I need the code to switch tab1 to tab3
// possible to call tabs.select() method here ?
}
}
// my Tabs.vue page
<ion-tabs ref="tabs" >
浏览 2提问于2021-05-22得票数 0
回答已采纳
1回答
我有以下模板：
<template>
<div>
<h1>Users from SQL Server!</h1>
<p>This component demonstrates fetching data from the server.</p>
<table v-if="userlist.length" class="table">
<thead>
<tr>
浏览 1提问于2017-06-06得票数 2
回答已采纳
我无法将第三方js库连接到vue.js组件
main.js
...
require('jquery')
import Vue from 'vue'
import VueMdl from 'vue-mdl'
import App from './App'
import Auth from './views/user/Auth'
import Index from './views/Index'
import VueRouter from 'vue-router'
import VueR
浏览 3提问于2017-01-11得票数 1
我有一个插件，这个插件使用Vuex
// plugin.js
import Vuex from "vuex";
import store from "./store.js";
export default {
install(Vue, options) {
const storeInstance = new Vuex.Store(store);
Vue.prototype.$store = storeInstance;
}
};
在这个插件中，我导入了一个存储对象。
// store.js
export defa
浏览 6提问于2022-01-27得票数 4
回答已采纳
我想做一个Vue插件，它注册了一个全局组件，并允许插件方法(通过this.$magic访问全局)。例如：
src/plugins/magic.js
import Magic from './Magic.vue';
export default {
install(VueInstance) {
console.log('Installing');
VueInstance.component('magic', Magic);
VueInstance.prototype.$magic = {
incremen
浏览 0提问于2018-09-15得票数 1
回答已采纳
我在我的main.js中创建了一个全局对象，用于访问在控制器之间的整个应用程序中登录的用户数据
main.js
Vue.prototype.user = getUser() // assume a method to getUser data
现在，上面的.user对象将在具有this.user的其他组件中可用，
我正在寻找的是，如果我在任何组件中对this.user进行更改，这些更改也会反映到其他组件上，这不是现在发生的事情。
我有两个组件，一个用于更新this.user EditProfileComponent.vue中的数据
<input type="text" v
浏览 6提问于2018-01-01得票数 1
回答已采纳
我对vue js 2中的路由器链接组件有问题。
index.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import HomeView from '../views/HomeView.vue';
import OrdersView from '../views/OrdersView.vue';
Vue.use(Router)
export default new Router({
routes: [
{
path: '
浏览 4提问于2022-09-09得票数 0
2回答
我不能使用我的Vue.prototype.$http，因为我不知道如何使它在我的路由文件中可用。
axios.js
import Vue from 'vue';
import axios from 'axios';
// noinspection JSIncompatibleTypesComparison
const isDevelopmentMode = process.env.NODE_ENV === 'development';
// base URL for backend access
const backendUrl = (isD
浏览 4提问于2020-12-29得票数 0
回答已采纳
我正在尝试使用vue-路由器从地址栏中获取一个名为project_id的变量。我已经初始化了这样一个路由器：
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'
Vue.config.productionTip = false
Vue.use(VueRouter)
/* eslint-disable no-new */
const router = new VueRouter({
routes: [
{ path:
浏览 0提问于2018-06-13得票数 2
回答已采纳
每当触发对router.push的调用时，我都需要执行某个操作。
我正在尝试使用Vue-Router的导航保护，但是在它的回调中，没有办法知道是什么方法(go/push/back/replace)触发了它。
router.beforeResolve((to, from) => {
// Do something only if this was triggered by "push"
});
浏览 8提问于2019-09-25得票数 0
我想访问插件中的vue.data或方法。
不管我试了几次，都没用。
如eventBus，Mixin等。
所以我很好奇是否有可能把这些方法叫做那样。
谢谢你阅读这个问题。
这是自定义组件。
<template>
<div>
<v-overlay :value="isProcessing">
<v-progress-circular indeterminate size="64"></v-progress-circular>
</v-overlay>
<
浏览 5提问于2022-10-06得票数 0
我目前在尝试使用webpack.ProvidePlugin时得到了这个，但似乎加载不正确。这是我的environment.js
var webpack = require("webpack");
const { environment } = require("@rails/webpacker");
const vueLoader = require("./loaders/vue");
environment.loaders.append("vue", vueLoader);
environment.plugins.appe
浏览 0提问于2018-04-02得票数 8
我正在尝试在我的应用程序中需要的地方重用我的代码片段。这段代码在vue-router的路径上创建条件。
为此，我创建了一个文件"utils.js“：
const util = {
nextStepAtelier () {
if (this.$route.path.includes(this.user.event_1.slug)) {
this.$router.push(`/events/${this.user.event_1_2.slug}/step-1`)
}
if (this.$route.path.includes(this.user.e
浏览 37提问于2020-02-27得票数 0
回答已采纳
在下面的navigateToHome方法中，如何在一个对象($router)上使用数组的推送方法Array.prototype.push，其中$router是主要的路由器对象：
user.vue
<script>
export default {
data() {
return {
id: this.$route.params.id
}
},
methods: {
navigateToHome(){
浏览 1提问于2018-05-28得票数 0
回答已采纳
我有以下Base.vue (为了简单起见，简化了)：
<template lang="html">
<!-- Start Template Root Div -->
<div class="">
<router-view
v-on:modalToggled="scrollYDisabled = !scrollYDisabled"
/>
</div>
<!-- End Template Root Div -->
</templa
浏览 2提问于2020-03-13得票数 0
回答已采纳
6回答
嘿，伙计们，我试图在我的行动中做一个请求，我得到了一个错误：
Cannot read property '$http' of undefined
我以这种方式在我的main.js文件中设置了vue资源：
import Vue from 'vue'
import VueResource from 'vue-resource'
import VueRouter from 'vue-router'
import App from './App.vue'
import {routes} from './routes
浏览 7提问于2017-08-11得票数 3
我正在使用vuejs来开发我的应用程序的一个模块，我将获得数据，我需要将这些数据设置为App.vue中的变量ex App.vue。
我将构建vue应用程序并将其集成到另一个应用程序中。是否有方法在父应用程序中公开变量gblData。
浏览 0提问于2019-07-24得票数 2
回答已采纳
1回答
我尝试构建一个可以动态加载组件的NuxtJS应用程序。
用我的代码，我做到了。在服务器端，组件通常被加载，但是当页面加载时，浏览器将面临一个巨大的内存泄漏，甚至不允许运行性能分析或内存堆快照。
我的代码是这样的
/plugins/theme-load-method.js
import Vue from 'vue';
export default function ({store}) {
Vue.prototype.loadThemeTemplate = function loadThemeTemplate(template) {
return () => i
浏览 1提问于2019-07-19得票数 1
1回答
如何在类型记录vue类中访问vue路由器的params？
见所附截图，打字稿抱怨..。我需要安装一些类型吗？
我似乎能够做到这一点的唯一方法是:1-导入路由器，如图2所示-通过字符串文本访问params：
router['history'].current.params.hash
但这破坏了火线
不允许通过字符串文本访问对象。
正确地说，我不想删除这条规则。
浏览 1提问于2019-05-03得票数 2
回答已采纳
"cardData“可以看到，但不能理解数组由哪些元素组成。 在vue-router v3.x中，一切都正常工作。 我的错误： [Vue warn]: Invalid prop: type check failed for prop "productCartData". Expected Object, got String with value "[object Object]".
at <ProductCart key=undefined productCartData="[object Object]" >
浏览 79提问于2021-06-20得票数 0
回答已采纳
我是Vue.js的新手，我试图创建一个使用jQuery 插件的自定义组件。当我将组件文件包含在另一个组件中时，我将得到一个错误：
Uncaught :在/resources/js/form-builder.min.js中没有定义jQuery
我创建了一个名为formBuilder.vue的自定义组件。以下是组件代码：
<template>
<div class="content">
<formBuilder/>
</div>
</template>
<script>
/
浏览 1提问于2020-03-09得票数 3
回答已采纳
1回答
重写全局变量的值
、、、
我刚刚在我的$isCompany中创建了两个变量$isLoggedIn和main.js。
import Vue from "vue";
import App from "./App.vue";
import "./registerServiceWorker";
import router from "./router";
Vue.config.productionTip = false;
Vue.prototype.$isCompany = true;
Vue.prototype.$isLoggedIn = true;
new
浏览 4提问于2020-05-29得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
