在 vue-cli 上使用 vue-router 设置页面路由的简单示例

Question

我正在尝试使用 vue-cli 获得最简单的页面路由。

我一直在尝试遵循 Vue-router 文档 (https://router.vuejs.org/guide/#html) 以及我在 google 上遇到的各种其他指南，但在 vue- cli.

我能够得到此处显示的示例：https://www.tutorialspoint.com/vuejs/vuejs_routing 工作，它不使用 vue-cli。从那里我尝试 'copy' 那个例子到 vue-cli 看看我是否可以让它工作。

我的 main.js 文件如下所示：

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App.vue';

Vue.config.productionTip = false

const Route1 = { template: '<div>router 1</div>' }
const Route2 = { template: '<div>router 2</div>' }
const routes = [
    { path: '/route1', component: Route1 },
    { path: '/route2', component: Route2 }
];

const router = new VueRouter({
    routes
});

new Vue({
    el: '#app',
    router,
    render: h => h(App)
});

我的 App.vue 文件如下所示：

<template>
  <div id="app">
    <h1>Routing Example</h1>
    <p>
      <router-link to = "/route1">Router Link 1</router-link>
      <router-link to = "/route2">Router Link 2</router-link>
    </p>
    <router-view></router-view>
  </div>
</template>

<script>
export default {

}
</script>

它不起作用。我尝试过直接访问文件系统上的 dist/index.html 和使用 npm run serve 在本地主机上查看应用程序。我看到了该页面，但 <router-link> 标签仅呈现为 <router-link>，而不是锚点 (<a>) 标签。无法点击它们，因此没有路由发生。

我浏览器中的页面来源如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="icon" href="favicon.ico">
    <title>ucic</title>
    <link href="js/app.a486cc75.js" rel="preload" as="script">
    <link href="js/chunk-vendors.a6df83c5.js" rel="preload" as="script">
  </head>
  <body>
    <noscript><strong>We're sorry but ucic doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript>
    <div id="app">
      <h1>Routing Example</h1>
      <p>
        <router-link to="/route1">Router Link 1</router-link>
        <router-link to="/route2">Router Link 2</router-link>
      </p>
      <router-view></router-view>
    </div>
    <script src="js/chunk-vendors.a6df83c5.js"></script>
    <script src="js/app.a486cc75.js"></script>
  </body>
</html>

没有控制台错误，也没有尝试下载 javascript 个文件的错误。

谁能指出我正确的方向？我做错了什么？

更新：

正如 Pukwa 所提到的，我没有正确安装应用程序。这样做之后，我不再收到白屏，但如上所述，<router-link> 标签没有呈现为锚点，而是字面意义上的 <router-link> 标签。 javascript 显然在做某事，否则即使那样也不会显示在页面上。

我已经更新了我的问题而不是问一个新问题，因为我原来的问题还没有解决（vue-router 仍然没有工作），这只是尝试让它工作的许多迭代之一（在之前的迭代中，我已经正确安装了应用程序并看到了上述错误。

Answer 1

我猜你没有在 main.js

中安装你的应用程序

new Vue({
    el: '#app',
    router,
    render: h => h(App)
});

Answer 2

我必须应用三个修复程序才能使此代码正常工作：

安装 Puwka 在其回答中确定的应用程序
在main.js中添加Vue.use(VueRouter);（我从这个问题的答案中得到了帮助：[Vue warn]: Unknown custom element: <router-view> - did you register the component correctly?）
将 "runtimeCompiler": true 添加到 vue.config.js（我从这个问题的答案中得到了帮助： and this: https://cli.vuejs.org/config/#runtimecompiler）

此外，我无法在控制台中看到日志，因为 vue 或 npm 似乎关闭了日志记录？（我必须先使用 // eslint-disable-next-line no-console 才能使用 console.log 语句）。

对这个问题的评论帮助我解决了那个问题。不知何故，在挂载函数中注销 this.$router.currentRoute.path 后，我能够在开发人员控制台中看到错误。

在 vue-cli 上使用 vue-router 设置页面路由的简单示例

Setting up a simple example of page routing using vue-router on vue-cli

vue.js

vue-router

vue-cli-3