在 vue-cli 上使用 vue-router 设置页面路由的简单示例
Posted
技术标签:
【中文标题】在 vue-cli 上使用 vue-router 设置页面路由的简单示例【英文标题】：Setting up a simple example of page routing using vue-router on vue-cli 【发布时间】：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 仍然无法正常工作），这只是尝试让它工作的众多迭代之一（我有，在以前的迭代中，应用程序已正确安装并看到上述错误）。
【问题讨论】：
【参考方案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 后，我能够在开发者控制台中看到错误。
【讨论】：
以上是关于在 vue-cli 上使用 vue-router 设置页面路由的简单示例的主要内容，如果未能解决你的问题，请参考以下文章
Vue-Router路由Vue-CLI脚手架和模块化开发 之 Vue-CLI 2.x脚手架工具基于webpack simple模板与基于webpack模板构建项目