未定义VueRouter
VueRouter是Vue.js官方的路由管理器。它允许开发者在Vue.js应用中实现客户端路由，通过不同的URL路径来展示不同的组件内容，实现单页应用（SPA）的效果。
VueRouter的主要特点包括：
- 声明式路由：通过简单的配置，可以定义路由和组件之间的映射关系，使得路由的管理变得简单和直观。
- 嵌套路由：VueRouter支持嵌套路由，可以在组件内部定义子路由，实现更复杂的页面结构和导航。
- 参数传递：可以通过路由参数传递数据，使得不同页面之间可以进行数据交互。
- 路由导航守卫：VueRouter提供了全局的导航守卫和组件级的导航守卫，可以在路由跳转前后执行相应的逻辑，例如权限验证、页面切换动画等。
- 动态路由：可以根据需要动态地添加、修改和删除路由，实现更灵活的页面管理。
VueRouter适用于构建中小型的单页应用，特别是基于Vue.js的项目。它可以帮助开发者更好地组织和管理页面路由，提升用户体验和开发效率。
腾讯云提供了云服务器CVM、云数据库MySQL、云存储COS等产品，可以与VueRouter结合使用，搭建完整的前后端开发环境。具体产品介绍和使用方法可以参考腾讯云官方文档：
以上是关于VueRouter的简要介绍和相关腾讯云产品的推荐。如需更详细的信息和使用指南，建议参考官方文档或进行进一步的学习和研究。
相关·内容
我正在审查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
1回答
根据文件中的信息。我可以从url中获取参数，并将它们作为参数传递给组件。
我试试看：
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter);
var router = new VueRouter({
mode: 'history',
routes: [
{ path: '/', component: App, props: (r
浏览 1提问于2018-09-14得票数 0
1回答
我使用Laravel5.3与Vue 2和Vue路由器，但我的组件是不可见的。Foo和Bar正在工作。
这是我的App.js
/**
* Load JavaScript dependencies
*/
require('./bootstrap');
/**
* Import Vue and VueRouter
*/
import Vue from 'vue'
import VueRouter from 'vue-router'
/**
* Import Components
*/
import UsersIndex from &#
浏览 0提问于2016-11-07得票数 0
是否可以访问Vue组件之外的VueRouter。
我尝试过在JavaScript文件中导入Vue。在这个文件中，我可以访问Vue.http，但不能访问Vue.router或Vue.$router。最后2次返回未定义。
main.js
import Vue from 'vue'
import VueResource from 'vue-resource'
import VueRouter from 'vue-router'
import routes from './config/routes'
import store from
浏览 6提问于2017-04-22得票数 44
回答已采纳
我正试着写我的第一个Vuejs应用。我正在使用vue-cli和。
当我将vue-router链接添加到我的应用程序组件时，我在控制台中得到了这个错误
呈现函数中的错误："TypeError:无法读取未定义的属性‘匹配’“
这是我的代码：
App.vue
<template>
<div>
<h2>Links</h2>
<ul>
<router-link to='/'>Home</router-link>
<router-link t
浏览 12提问于2017-06-18得票数 35
回答已采纳
我已经有一个问题有两天，并最终孤立了它。导入Vue和VueRouter会在我的前端代码中提供未定义的内容。这是因为webpack的输出(使用externals属性加载客户端库)在导入外部加载库时检查module.__esModule，如果为真，则返回module.default。在这种情况下，Vue.__esModule和VueRouter.__esModule是真的，而Vue.default和VueRouter.default是未定义的。我甚至不确定向谁提交错误，也不确定是否有什么可以添加到webpack.config.js中，以使这一工作像以前一样。这可能是Vue将__esModule包含
浏览 3提问于2022-02-07得票数 0
回答已采纳
只想设置一个简单的重定向点击某物。不知道如何使用vue-路由器这样做。请在下面找到我的密码：
app.js
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const router = new VueRouter({
routes: [
{ path: '/', redirect: '/' },
{ path: '/product', redirect: '/product' }
]
});
const app = new
浏览 2提问于2017-01-14得票数 0
将getter导入Rotate - Vuex时出现问题。 我正在尝试导入一个在vuex状态内的值。 报告一个错误，指出它是未定义的。 我不知道我可能做错了什么。如果有人能帮忙，我将不胜感激。 感谢您的收听 错误"_store__WEBPACK_IMPORTED_MODULE_4__.default.getters :未定义TypeError“ 商店 import Vue from 'vue'
import Vuex from 'vuex'
import auth from './module-auth'
Vue.use(Vuex)
e
浏览 23提问于2019-05-19得票数 0
1回答
我的main.js设置如下：
import Vue from 'vue'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource';
Vue.config.productionTip = false;
Vue.use(VueRouter);
Vue.use(VueResource);
Vue.mixin({
methods: {
get_req: function(url) {
Vue.http.get(url, {
浏览 2提问于2017-11-03得票数 0
我想要建立一张包含vuetify和vue的表格。
当前im收到以下错误消息: TypeError: this.$vuetify.breakpoint未定义
当我使用vuetify的v数据表时，它就出现了。
错误：
[Vue warn]: Error in render: "TypeError: this.$vuetify.breakpoint is undefined"
found in
---> <VData>
<VDataTable>
<AngebotsTable> at src/components
浏览 5提问于2021-01-07得票数 1
回答已采纳
//main.js
import Vue from "vue";
import App from "./App.vue";
import VueRouter from "vue-router";
import HelloWorld from "./components/HelloWorld.vue";
Vue.use(VueRouter);
const router = new VueRouter({
routes: [{ path: "/", component: HelloWorld }]
});
浏览 9提问于2021-12-07得票数 0
回答已采纳
1回答
我试图让vue-router工作，但没有成功，这让我很生气，因为我没有看到任何问题。
我在Laravel中通过Elixir使用了webpack，它有这样的gulpfile：
const elixir = require('laravel-elixir');
require('laravel-elixir-vue');
elixir(mix => {
mix.sass('app.scss')
.webpack('app.js');
});
在我的app.js文件中，我正在“编译”下面的代码
window.Vue =
浏览 1提问于2016-10-11得票数 2
2回答
VueJS路由未定义
、、、
我试图在router-view标记中呈现vue组件。但它给了我一个错误
TypeError:路由未定义
但我在任何地方都没有使用route这个词。这是我的密码。
App.vue
<template>
<div id="app">
<my-header></my-header>
<router-view></router-view>
<my-footer></my-footer>
</div>
</template>
浏览 0提问于2018-03-12得票数 6
回答已采纳
我试图使用vue-router将数据从一个组件重定向到另一个组件。
在我的主要组件中，我有一个单击链接，在该链接中，我调用一个JavaScript函数来执行路由。
<a href="javascript:void(0);" @click="switchComponent('ToolDetail')">click here</a>
methods: {
switchComponent(comp) {
this.$router.push({name:comp});
},
到目前为止，当单击链接时，路由本身正在给出
浏览 0提问于2018-07-15得票数 2
回答已采纳
当我试图访问随机组件中的vuex存储时，将返回未定义的。然而，我把商店注入我的Vue对象。有人知道怎么解决这个问题吗？我可以手动将存储对象导入每个组件，但这并不是很干净.我的文件看起来是这样的：
main.js
import Vue from 'vue'
import VueResource from 'vue-resource'
import VueRouter from 'vue-router'
import VueI18n from 'vue-i18n'
import routes from './config/
浏览 4提问于2017-03-24得票数 0
回答已采纳
6回答
这是我的第一篇关于堆栈溢出的文章，如果我做错了什么，那么请提前道歉。我的问题；
我已经设置了一个VueJS项目，我正在尝试从另一个组件中获取App.vue中的数据。为此，我使用this.$root.count，但它返回未定义的。
Main.js:
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'
Vue.use(VueRouter);
const router = new VueRouter({
mode: 'history
浏览 11提问于2017-03-23得票数 5
回答已采纳
我正在用CoreUI在TypeScript上构建一个应用程序。我目前遇到的问题与CoreUI的图标有关。我的应用程序运行良好，并呈现图标，但VSC抱怨具体行：
icons: { cilHome, cilSettings },
下面是我的main.ts的全部代码：
import Vue from "vue";
import App from "./App.vue";
import CoreuiVue from "@coreui/vue";
import { cilPencil, cilSettings } from "@coreui/ico
浏览 2提问于2020-03-03得票数 2
回答已采纳
我使用router.beforeEach来保护一些视图。我在输入vue之前获取我的用户。我想在所有经过身份验证的页面中使用此用户。如何在我的vuejs组件中注入router.beforeEach中的数据？
下面是我的路由定义：
import Vue from 'vue';
import VueRouter from 'vue-router';
import AuthService from './services/AuthService';
import Index from './pages/Index.vue';
Vue.
浏览 3提问于2017-01-20得票数 7
我一直在互联网上寻找解决方案，但都没有成功。有人知道我做错了什么吗？ 我尝试导入index.js： import Vue from 'vue'
import Vuex from 'vuex'
import Axios from '../boot/axios'
import axios from 'axios'
import VueRouter from 'vue-router'
Vue.use(axios)
Vue.use(VueRouter)
Vue.use(Axios)
axios.js:
import a
浏览 24提问于2019-06-11得票数 0
1回答
我的Vue测试表有几个问题。我正试着测试一种混音。它需要设置路由并模拟一个函数。这是我的密码
混和
export const CampaignNotifier = {
mounted () {
// Create tagname with dynamic currency parameter from banking app
let routeName = this.$route.name
let queryParamCurrency = (this.$route.query.currency) ? `- ${ this.$route.q
浏览 9提问于2022-08-15得票数 0
在将webpack从第3版升级到第4版和第三方软件包后，我得到以下错误：
vue-路由器未能解析异步组件的默认值: TypeError:无法读取未定义的属性“调用”
路由导航过程中的路由器未登录错误：webpack_require：TypeError:无法读取未定义的属性“调用”(引导代码:63)
Webpack.js
const ENV = process.env.NODE_ENV || 'production';
const path = require('path');
const VueLoaderPlugin = require('vu
浏览 1提问于2019-07-19得票数 0
2回答
我试着开始做这个：
我克隆了这个包，并按照下面的说明构建：
npm install
npm run build
但是，我在以下方面收到了“要求未定义”错误：
var Vue = require('vue')
var VueRouter = require('../src')
在/example.js中
我安装了节点和浏览器..。不知道该怎么做。
浏览 1提问于2015-07-27得票数 0
回答已采纳
1回答
我正在使用Vue.js的项目，捆绑与卷。
这是我的rollup.config.js文件
import vue from 'rollup-plugin-vue2'
import less from 'rollup-plugin-less2';
import buble from 'rollup-plugin-buble'
import nodeResolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'
浏览 2提问于2018-01-24得票数 4
回答已采纳
从嵌套视图访问路由对象有问题。以下是简化的代码：
main.js
import Vuetify from 'vuetify'
import VueRouter from 'vue-router'
import Vuetify from 'vuetify'
Vue.use(VueRouter)
Vue.use(Vuetify)
const router = new VueRouter({
routes : [
{path : '/contacts', component: Contacts,
childr
浏览 1提问于2017-05-04得票数 2
回答已采纳
1回答
日安。我试图为我的Vue应用程序创建一个保护程序，它只在存在状态值(非null或未定义)的情况下重定向到页面。然而，当我使用beforeEnter时，我会得到一个循环引用，它不会将我重定向到页面。如果我使用beforeRouteEnter，我通常会被重定向，但是如果我更新了页面，我就不会重定向到上一页。在检查存储状态后，这里的方法到底有什么问题可以将我重定向到页面？
存储中的方法非常简单，我只需保存api调用在我的状态中产生的任何内容，从null开始。这里到底出了什么问题？
import Vue from 'vue'
import VueRouter from 'vue
浏览 2提问于2020-11-08得票数 0
回答已采纳
我正在尝试构建一个Vue应用程序，但是我在控制台上得到了这个错误：
Vue警告:未能挂载组件:模板或呈现函数未定义。
这是我的密码：
header.vue
<header>
<div class="page-logo">Foo.com</div>
</header>
<nav>
<ul class="nav">
<li>My Account</li>
<li>Log In</li>
浏览 4提问于2017-05-20得票数 2
回答已采纳
我正在尝试使用vue-路由器在一个CRUD应用程序，我已经跟随在一个教程。显示的链接，但我得到了以下错误:未定义的ReferenceError:登录
我已经在我的app.js中导入了vue-路由器，并在我的routes.js文件中列出了路由。然而，这一错误仍然会出现。我已经搜索这个错误有一段时间了，似乎找不出是什么导致了这个错误。
app.js：
require('./bootstrap');
import VueRouter from 'vue-router'
Vue.use(VueRouter)
Vue.component('navb
浏览 0提问于2019-05-14得票数 0
回答已采纳
我知道有很多类似的问题，但我无法从这些问题中找到解决办法。
已经安装了vue的npm并成功地使用npm run dev编译，我不知道它为什么会在下面返回这样的错误。
ReferenceError: Vue未定义
这是我在app.js中的设置
import Vue from 'vue';
import VueRouter from 'vue-router';
window.Vue = Vue;
Vue.use(VueRouter);
new Vue({
el: '#app',
router
});
在我的welcome.bl
浏览 1提问于2020-03-16得票数 0
回答已采纳
我在main.js中有一个折叠的设置：
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'
import Login from './views/Login.vue'
import Profile from './views/Profile.vue'
import Simulations from './
浏览 3提问于2021-04-09得票数 3
回答已采纳
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.js const app = new Vue({
el: '#wrapper',
router,
store
}); router.js const router = new VueRouter({
routes,
hashbang: false,
mode: 'history',
})
router.beforeEach((to, from, next) => {
NProgress.start()
NProgress.set(0.1)
next()
})
rout
浏览 48提问于2020-11-09得票数 1
回答已采纳
我正在尝试访问Vuex商店，如本文所示：
我浪费了一个早上的时间，因为我确信这会是一个简单的错误，但这让我无法理解。在beforeEach() => {}主体中，我得到“未定义存储”。
我正在使用来自LoginForm组件的商店，它似乎就在那里。chrome调试器中的Vuex选项卡显示了我期望的存储内容。我做错什么了？
从关键代码中剪切-n粘贴：
src/路由器/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import LoginForm from '@/com
浏览 0提问于2018-01-27得票数 14
1回答
我尝试了很多方法，但是$route似乎总是没有定义，我在shallowMount：TypeError: Cannot read property 'params' of undefined上遇到了这个错误。 在我的组件中，我想检查$route的参数，但它总是未定义。我已经查看了文档并模拟了$route来设置它，但是$route似乎没有被模拟。我也试过使用localVue.use(VueRouter)，认为它可以设置$route，但它没有。 my-component.ts @Component
export default class MyComponent extends V
浏览 130提问于2021-04-30得票数 2
我正面对这个问题：
未定义的不是一个对象(计算'modulesmoduleId.call')
这是一棵文件树：
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
│ ├── favicon.ico
│ └── index.html
├── src
│ ├── App.vue
│ ├── assets
│ │ ├── logo.png
│ │ └── tailwind.css
浏览 2提问于2020-05-06得票数 1
1回答
我正在尝试使用查询字符串(用于path的查询字符串)将路由定义为外部链接，方法如下所示：
Vue.use(VueRouter)
const routes = [
{
path: '/',
beforeEnter() {location.href = '/path='+this.$router.query.path},
name: 'Home',
component: Home3
},
但我遇到了一个错误，因为“无法读取未定义的属性(读取$route)”。
如何用查询将正确的定义写入外部链接？
浏览 3提问于2021-11-18得票数 0
回答已采纳
我有一个登陆页面注册/登录，从该重定向到主页的内容。成功登录后，我重定向如下：
this.$router.push({ name: 'main' })
这是可行的，但是如果我刷新页面或者尝试从url访问它--比如 --我得到了错误:页面不存在。目前，我没有任何保护，以防止访问页面，只有登录用户，我也添加了‘*’路径路由器为未定义的路由，它也只是抛出404，而不是加载主页。以下是我的路由器设置：
import Vue from 'vue'
import VueRouter from 'vue-router'
import BootstrapVue
浏览 0提问于2018-09-14得票数 1
回答已采纳
1回答
我正在返回所有组件中的用户类型，但我需要在我的路由中添加它的验证，不知道如何。
代码
这是我的route.js文件，需要对用户进行身份验证的路由是在meta中定义的。
import Vue from "vue";
import VueRouter from 'vue-router';
import store from './store';
Vue.use(VueRouter);
const router = new VueRouter({
mode: "history",
routes: [
/
浏览 3提问于2020-02-20得票数 0
回答已采纳
1回答
我用vue-路由器方法beforeEnter()实现了一个保护beforeEnter()路由的路由保护。
--我试着测试该路由是否只对进行了保护。
我使用Vuejs 2，vue-路由器，Vuex和vue-test-utils.
router.js
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
export default new Router({
routes: [
..., // other routes
{
path: &#
浏览 0提问于2019-10-14得票数 0
回答已采纳
使用以下指南使用TypeScript创建了一个新的Vue项目：
安装Vue CLI，如果尚未安装
npm安装--global @vue/cli
创建一个新项目，然后选择“手动选择功能”选项
vue创建my-project-name
用npm run serve测试了这个项目，并且没有出现问题。
然后我通过运行vuetify添加了vue add vuetify
然而，这导致了一些错误：
C:/test/vue中的错误-test/src/main.ts(13，3)：13:3没有重载匹配此调用。重载3中的1，‘(选项？：ThisTypedComponentOptionsWithArrayProp
浏览 5提问于2020-04-07得票数 2
回答已采纳
我正在学习如何将Vue.js与一起使用，讲述者不会收到任何错误，但我在单击更改路由时遇到了以下错误。
Vue警告:未能挂载组件:模板或呈现函数未定义。
下面的代码来自我的app.js：
require('./bootstrap');
window.Vue = require('vue');
import VueRouter from 'vue-router'
Vue.use(VueRouter)
let routes = [{
path: '/dashboard',
component: requir
浏览 1提问于2019-02-08得票数 6
回答已采纳
1回答
我使用的是vue js 3，但我接受了这个错误。我尝试使用路由器。
我的main.js文件在这里：
import { createApp } from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router' // i added this
import Vue from 'vue'; // and this
Vue.use(VueRouter); // and this
createApp(App).mount('
浏览 58提问于2021-06-11得票数 1
回答已采纳
1回答
我用的是Vue 2.4.4。我一直在搜索gettin URL查询参数，建议的大多数位置如下：
this.$route.query.test
$route是未定义的，您需要做一些特殊的事情才能让它正常工作吗？
多亏了塔那索斯，我找到了一个解决办法：
var router = new VueRouter({
mode: 'history',
routes: []
});
var index = new Vue({
el: '#index',
router,
mounted: function () {
alert(this.$route.query.t
浏览 0提问于2018-07-11得票数 0
回答已采纳
我正试图与webpack一起构建一个Vue项目，但我在控制台上遇到了一个错误。
Vue警告:未能挂载组件:模板或呈现函数未定义。
这是我的密码：
webpack.config.js
var Webpack = require('webpack');
var path = require('path');
var rootPath = path.resolve(__dirname);
module.exports = {
entry: [
'webpack-dev-server/client?http://localhos
浏览 4提问于2017-06-19得票数 0
回答已采纳
这里有一个示例Vue路由器，它首先处理登录，然后再使用特定的id访问表单：
router = new VueRouter({
routes: [
{path: '/form/:id', redirect: '/login'},
{path: '/login', name: 'Login', component: Login}
]
});
是否有一种方式使登录仍然可以访问传递的:id参数，因为当我
浏览 0提问于2018-04-20得票数 11
回答已采纳
我感到迷茫。
我用vue-cli做我的项目。我已经安装好了。一切都很好。我想在vue组件中使用视图资源，但是我找不到为什么它不能工作。
这是我的main.js (我在用webpack)
import Vue from 'vue'
import VueRouter from 'vue-router'
var VueResource = require('vue-resource')
Vue.use(VueRouter)
Vue.use(VueResource)
const router = new VueRouter({
routes:
浏览 7提问于2016-12-06得票数 2
我尝试使用视图路由器将属性传递给我的单文件组件(.vue)，但在视图扩展中仍然是“未定义的”。
// Dashboard.vue
<template>
<div class="dashboard" :user="user" :current-team="currentTeam">
<div class="container">
<!-- Application Dashboard -->
<div class="row justi
浏览 6提问于2018-07-13得票数 0
回答已采纳
得到错误
Uncaught :无法读取未定义at createRouter ( vue-router.esm-bundler.js:2269 )的属性“侦听”，地址为main.js:16 createRouter @vue-router.esm-bundler.js:2269(匿名)@ main.js:16
代码示例:如何复制
const { createRouter, createWebHistory, createWebHashHistory } = VueRouter
const { createApp } = Vue
const Home = {
template: `
浏览 1提问于2020-05-22得票数 0
我正在关注这个视频：
我最初的问题被描述为，但这已经解决了。我将它包含在这里，这样您就可以看到我到目前为止采取了哪些步骤。
现在，我得到这样的警告: Vue warn:无法挂载组件:模板或呈现函数未定义。
警告并不是很糟糕，但是路由器视图没有显示出来。也就是说，在主页和关于链接的下方没有显示任何内容。
master.blade.php
<!doctype html>
<html lang="en">
<head>
<title>My App</title>
<lin
浏览 3提问于2017-07-13得票数 1
回答已采纳
1回答
根据的帮助，我创建了以下app.js
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
import Vue from 'vue'
import VueRouter from &
浏览 0提问于2018-03-15得票数 0
回答已采纳
我正在尝试使用Vuex，如文档所示。但是，$store并没有在Vue dev工具中显示，而是在我的代码中返回未定义的内容。我使用了示例作为参考。
import Vue from 'vue/dist/vue';
import store from './store';
import router from './router';
const app = new Vue({
el: '#app',
store,
router,
computed: {
loading() {
return th
浏览 0提问于2018-10-17得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
