Я пытаюсь заставить работать простейшую маршрутизацию страниц с помощью vue-cli.
Я пытался следовать документации Vue-router (https://router.vuejs.org/guide/#html), а также различных других руководств, с которыми я сталкивался в Google, и мне не удалось добиться того, чтобы что-либо работало с vue-cli.
Мне удалось получить показанный здесь пример: https://www.tutorialspoint.com/vuejs/vuejs_routing рабочий, который не использует 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>
Это не работает. Я пробовал как прямой доступ к 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.
Может кто-то указать мне верное направление? Что я делаю неправильно?
Обновлять:
Как уже упоминал Пуква, я неправильно смонтировал приложение. После этого я больше не получаю белый экран, но, как упоминалось выше, тег <router-link> отображается не как привязка, а буквально как тег <router-link>. Очевидно, что javascript что-то делает, иначе даже это не отобразится на странице.
Я обновил свой вопрос, а не задавал новый, так как моя исходная проблема не решена (vue-router все еще не работает), и это только одна из многих итераций, чтобы попытаться заставить это работать (у меня было, на предыдущем итераций, правильно ли смонтировано приложение и обнаружена ошибка, описанная выше).
