I am trying to get the simplest of page routing working using vue-cli.
I have been trying to follow the Vue-router documentation (https://router.vuejs.org/guide/#html) as well as various other guides I have come across on google and have not been successful getting anything working on vue-cli.
I was able to get the example shown here: https://www.tutorialspoint.com/vuejs/vuejs_routing working, which does not use vue-cli. From there I tried to 'copy' that example into vue-cli to see if I can get it to work.
My main.js file looks like this:
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)
});
And my App.vue file looks like this:
<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>
It does not work. I have tried both direct access to the dist/index.html on the file system and viewing the app on localhost, using npm run serve. I see the page but the <router-link> tags render only as <router-link>, not as anchor (<a>) tags. It is impossible to click on them and thus no routing is happening.
The page in my browser has the following source:
<!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>
There are no console errors and no errors trying to download javascript files.
Can anyone point me in the right direction? What am I doing wrong?
Update:
As Pukwa has mentioned, I did not correctly mount the application. After doing so I no longer receive a white screen, but as mentioned above, the <router-link> tag is not rendering as an anchor but literally as a <router-link> tag. The javascript is obviously doing something, or else even that wouldn't show up on the page.
I've updated my question rather than ask a new one as my original problem has not been solved (vue-router is still not working) and this is only one of many iterations to try and get this to work (I have, on previous iterations, had the application correctly mounted and seen the error described above).
