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

【问题标题】：Setting up a simple example of page routing using vue-router on vue-cli在 vue-cli 上使用 vue-router 设置页面路由的简单示例
【发布时间】：2019-12-19 15:12:19
【问题描述】：

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

我一直在尝试遵循 Vue-router 文档 (https://router.vuejs.org/guide/#html) 以及我在 google 上遇到的各种其他指南，但在 vue-cli 上没有成功获得任何东西。

我能够得到这里显示的示例：https://www.tutorialspoint.com/vuejs/vuejs_routing working，它不使用 vue-cli。从那里我尝试将该示例“复制”到 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>

它不起作用。我已尝试使用npm run serve 直接访问文件系统上的 dist/index.html 并在 localhost 上查看应用程序。我看到了该页面，但 <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 仍然无法正常工作），这只是尝试让它工作的众多迭代之一（我有，在以前的迭代中，应用程序已正确安装并看到上述错误）。

【问题讨论】：

标签： vue.js vue-router vue-cli-3

【解决方案1】：

我猜你没有在main.js内挂载你的应用程序

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

【讨论】：

感谢 Puwka，安装应用程序让我不再看到空白页，但 vue-router 仍然无法正常工作。我将根据您的更改和我现在看到的内容更新问题。

【解决方案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（我从这个问题的答案中得到了帮助：Vue replaces HTML with comment when compiling with webpack 和这个：https://cli.vuejs.org/config/#runtimecompiler）

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

对此问题的评论Vue router does not render/mount root path component 帮助我解决了那个问题。不知何故，在挂载函数中注销 this.$router.currentRoute.path 后，我能够在开发者控制台中看到错误。

【讨论】：