UnCaught Reference Error: VueRouter is not Defined
UnCaught Reference Error: VueRouter is not Defined
我从来没有做过任何类型的全栈开发，有人指点本教程来做 WedAPI 和 VueJS。我也从未使用过 JS 或 Python、PERL 和 C# 之外的任何东西
教程在这里：https://www.youtube.com/watch?v=qS833HGKPD8
我在 31:00 和 37:55 之间的时间跨度，他开始 UI 前端部分。
然而，当我重新加载网页时，我 运行 进入错误“UnCaught Reference Error: VueRouter is not Defined”，它指向我的 app.js 文件第 8 行：
const router=new VueRouter({
routes
})
到目前为止，这里是代码片段：
home.js:
const home={template: `<h1>This is Home page</h1>`}
department.js:
const department={template: `<h1>This is Departments page</h1>`}
employee.js:
const employee={template: `<h1>This is Employee page</h1>`}
app.js:
//root component to list the routing parts
const routes=[
{path:'/home',component:home},
{path:'/employee',component:employee},
{path:'/department',component:department}
]
const router=new VueRouter({
routes
})
const app = new Vue({
router
}).$mount('#app')
variable.js:
//保存API urls
const variables={
API_URL: "http://localhost:15899/api",
PHOTO_URL: "http://localhost:15899/photos/vari"
}
index.html:
<!DOCTYPE html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>
<div id="app" class="container">
<h3 class="d-flex justify-content-center">
Vue JS Front End
</h3>
<h5 class="d-flex justify-content-center">
Employee Management Portal
</h5>
<nav class="navbar navbar-expand-sm bg-light navbar-dark">
<ul class="navbar-nav">
<li class="nav-item m-1">
<router-link class="btn btn-light btn-outline-primary"
to="/home">Home</router-link>
</li>
<li class="nav-item m-1">
<router-link class="btn btn-light btn-outline-primary"
to="/department">Department</router-link>
</li>
<li class="nav-item m-1">
<router-link class="btn btn-light btn-outline-primary"
to="/employee">Employee</router-link>
</li>
</ul>
</nav>
<router-view></router-view>
</div>
<script src="variables.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="home.js"></script>
<script src="department.js">
</script>
<script src="employee.js"></script>
<script src="app.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>
只有这段代码的教程，讲师没有问题。
收到此消息我做错了什么？
我在寻找解决方案，但方向到处都是。我什至试过
npm install --save vue-router
但得到了这个：
npm ERR! code ENOTFOUND
npm ERR! syscall getaddrinfo
npm ERR! errno ENOTFOUND
npm ERR! network request to https://registry.npmjs.org/@vue%2fdevtools-api failed, reason: getaddrinfo ENOTFOUND proxy-chain.intel.com
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly. See: 'npm help config'
npm ERR! A complete log of this run can be found in:
我已经配置了我的工作计算机的代理，但没有任何乐趣。
导师不需要安装vue router。他似乎只是将它链接到他的 index.html 中，我就是这样做的。
我已完成教程中所述的所有操作。
首先使用
安装vue-router
npm install --save vue-router
那只有你能用
import VueRouter from 'vue-router';
Vue.use(VueRouter)
const routes = [ {path: '/', component: SomeComponent} ]
如果有人遇到本教程，我会这样修复它：
所以本教程使用 HTML 方法而不是上面 Siti 的回答中提到的包安装方法。然而，自教程制作以来，Vue 更新了它的 URLs 以及如何在 HTML 模式下启动 Vue Router/use Vue 路由器，可以在这里找到：
https://router.vuejs.org/guide/
我的 app.js 现在看起来像这样：
//root component to list the routing parts
const routes=[
{path:'/home',component:home},
{path:'/employee',component:employee},
{path:'/department',component:department}
]
const router = VueRouter.createRouter({
// 4. Provide the history implementation to use. We are using the hash history for simplicity here.
history: VueRouter.createWebHashHistory(),
routes, // short for `routes: routes`
})
// const app = new Vue({
// router
// }).$mount('#app')
// 5. Create and mount the root instance.
const app = Vue.createApp({})
// Make sure to _use_ the router instance to make the
// whole app router-aware.
app.use(router)
app.mount('#app')
纽约 HTMl 文档现在看起来像这样：
<!DOCTYPE html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>
<div id="app" class="container">
<h3 class="d-flex justify-content-center">
Vue JS Front End
</h3>
<h5 class="d-flex justify-content-center">
Employee Management Portal
</h5>
<nav class="navbar navbar-expand-sm bg-light navbar-dark">
<ul class="navbar-nav">
<li class="nav-item m-1">
<router-link class="btn btn-light btn-outline-primary"
to="/home">Home</router-link>
</li>
<li class="nav-item m-1">
<router-link class="btn btn-light btn-outline-primary"
to="/department">Department</router-link>
</li>
<li class="nav-item m-1">
<router-link class="btn btn-light btn-outline-primary"
to="/employee">Employee</router-link>
</li>
</ul>
</nav>
<router-view></router-view>
</div>
<script src="variables.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vue-router@4"></script>
<script src="home.js"></script>
<script src="department.js">
</script>
<script src="employee.js"></script>
<script src="app.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>
注意更新的 URL http/s 链接和调用 vue 路由器的新方法。
我是 Vue js 的新手，所以直到我的工作伙伴指出这一点我才意识到这一点。
此问题暂时已解决
我从来没有做过任何类型的全栈开发，有人指点本教程来做 WedAPI 和 VueJS。我也从未使用过 JS 或 Python、PERL 和 C# 之外的任何东西 教程在这里：https://www.youtube.com/watch?v=qS833HGKPD8
我在 31:00 和 37:55 之间的时间跨度，他开始 UI 前端部分。
然而，当我重新加载网页时，我 运行 进入错误“UnCaught Reference Error: VueRouter is not Defined”，它指向我的 app.js 文件第 8 行：
const router=new VueRouter({
routes
})
到目前为止，这里是代码片段：
home.js:
const home={template: `<h1>This is Home page</h1>`}
department.js:
const department={template: `<h1>This is Departments page</h1>`}
employee.js:
const employee={template: `<h1>This is Employee page</h1>`}
app.js:
//root component to list the routing parts
const routes=[
{path:'/home',component:home},
{path:'/employee',component:employee},
{path:'/department',component:department}
]
const router=new VueRouter({
routes
})
const app = new Vue({
router
}).$mount('#app')
variable.js: //保存API urls
const variables={
API_URL: "http://localhost:15899/api",
PHOTO_URL: "http://localhost:15899/photos/vari"
}
index.html:
<!DOCTYPE html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>
<div id="app" class="container">
<h3 class="d-flex justify-content-center">
Vue JS Front End
</h3>
<h5 class="d-flex justify-content-center">
Employee Management Portal
</h5>
<nav class="navbar navbar-expand-sm bg-light navbar-dark">
<ul class="navbar-nav">
<li class="nav-item m-1">
<router-link class="btn btn-light btn-outline-primary"
to="/home">Home</router-link>
</li>
<li class="nav-item m-1">
<router-link class="btn btn-light btn-outline-primary"
to="/department">Department</router-link>
</li>
<li class="nav-item m-1">
<router-link class="btn btn-light btn-outline-primary"
to="/employee">Employee</router-link>
</li>
</ul>
</nav>
<router-view></router-view>
</div>
<script src="variables.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="home.js"></script>
<script src="department.js">
</script>
<script src="employee.js"></script>
<script src="app.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>
只有这段代码的教程，讲师没有问题。
收到此消息我做错了什么？ 我在寻找解决方案，但方向到处都是。我什至试过
npm install --save vue-router
但得到了这个：
npm ERR! code ENOTFOUND
npm ERR! syscall getaddrinfo
npm ERR! errno ENOTFOUND
npm ERR! network request to https://registry.npmjs.org/@vue%2fdevtools-api failed, reason: getaddrinfo ENOTFOUND proxy-chain.intel.com
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly. See: 'npm help config'
npm ERR! A complete log of this run can be found in:
我已经配置了我的工作计算机的代理，但没有任何乐趣。 导师不需要安装vue router。他似乎只是将它链接到他的 index.html 中，我就是这样做的。
我已完成教程中所述的所有操作。
首先使用
安装vue-routernpm install --save vue-router
那只有你能用
import VueRouter from 'vue-router';
Vue.use(VueRouter)
const routes = [ {path: '/', component: SomeComponent} ]
如果有人遇到本教程，我会这样修复它：
所以本教程使用 HTML 方法而不是上面 Siti 的回答中提到的包安装方法。然而，自教程制作以来，Vue 更新了它的 URLs 以及如何在 HTML 模式下启动 Vue Router/use Vue 路由器，可以在这里找到： https://router.vuejs.org/guide/
我的 app.js 现在看起来像这样：
//root component to list the routing parts
const routes=[
{path:'/home',component:home},
{path:'/employee',component:employee},
{path:'/department',component:department}
]
const router = VueRouter.createRouter({
// 4. Provide the history implementation to use. We are using the hash history for simplicity here.
history: VueRouter.createWebHashHistory(),
routes, // short for `routes: routes`
})
// const app = new Vue({
// router
// }).$mount('#app')
// 5. Create and mount the root instance.
const app = Vue.createApp({})
// Make sure to _use_ the router instance to make the
// whole app router-aware.
app.use(router)
app.mount('#app')
纽约 HTMl 文档现在看起来像这样：
<!DOCTYPE html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>
<div id="app" class="container">
<h3 class="d-flex justify-content-center">
Vue JS Front End
</h3>
<h5 class="d-flex justify-content-center">
Employee Management Portal
</h5>
<nav class="navbar navbar-expand-sm bg-light navbar-dark">
<ul class="navbar-nav">
<li class="nav-item m-1">
<router-link class="btn btn-light btn-outline-primary"
to="/home">Home</router-link>
</li>
<li class="nav-item m-1">
<router-link class="btn btn-light btn-outline-primary"
to="/department">Department</router-link>
</li>
<li class="nav-item m-1">
<router-link class="btn btn-light btn-outline-primary"
to="/employee">Employee</router-link>
</li>
</ul>
</nav>
<router-view></router-view>
</div>
<script src="variables.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vue-router@4"></script>
<script src="home.js"></script>
<script src="department.js">
</script>
<script src="employee.js"></script>
<script src="app.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>
注意更新的 URL http/s 链接和调用 vue 路由器的新方法。
我是 Vue js 的新手，所以直到我的工作伙伴指出这一点我才意识到这一点。 此问题暂时已解决