router-link does not render - vue.js

Question

router-link does not give an error, but it does not work. It only shows a string.
I tried all posts about this issue but none of them worked.
Please help
Here is my file:
webpack.config.js
/* eslint-disable */
var webpack = require('webpack');
var path = require('path');
var VueLoaderPlugin = require('vue-loader/lib/plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var MiniCssExtractPlugin = require('mini-css-extract-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
require('dotenv').config();
function isProduction() {
return process.env.NODE_ENV === 'production';
}
module.exports = {
mode: process.env.NODE_ENV,
watch: !isProduction(),
watchOptions: {
aggregateTimeout: 500,
ignored: ['node_modules']
},
resolve: {
alias: {
Router: path.resolve(__dirname, 'src', 'router'),
Store: path.resolve(__dirname, 'src', 'store'),
Pages: path.resolve(__dirname, 'src', 'pages'),
Components: path.resolve(__dirname, 'src', 'components'),
Directives: path.resolve(__dirname, 'src', 'directives'),
Filters: path.resolve(__dirname, 'src', 'filters'),
Images: path.resolve(__dirname, 'src', 'images'),
Styles: path.resolve(__dirname, 'src', 'styles'),
Plugins: path.resolve(__dirname, 'src', 'plugins'),
Mixins: path.resolve(__dirname, 'src', 'mixins')
}
},
entry: path.resolve(__dirname, 'src', 'index.js'),
output: {
filename: isProduction() ? 'assets/main.[contenthash].js' : 'assets/main.js',
path: path.resolve(__dirname, 'build'),
publicPath: '/'
},
module: {
rules: [
{
enforce: 'pre',
test: /\.(js\vue)$/,
loader: 'eslint-loader',
exclude: /node_modules/,
options: {
fix: false,
failOnWarning: true
}
},
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: function (file) {
return /node_modules/.test(file) && !/\.vue\.js/.test(file);
}
},
{
test: /\.s?css$/,
use: [
// consider vue-style-loader if not production?
// 'vue-style-loader',
MiniCssExtractPlugin.loader,
'css-loader',
// see postcss.config.js for options
'postcss-loader',
'sass-loader',
]
},
{
test: /\.pug$/,
oneOf: [
{
resourceQuery: /^\?vue/,
use: ['pug-plain-loader']
},
{
use: ['raw-loader', 'pug-plain-loader']
}
]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader'
}
]
},
plugins: [
new VueLoaderPlugin(),
new MiniCssExtractPlugin({
filename: isProduction() ? 'assets/style.[contenthash].css' : 'assets/style.css'
}),
new HtmlWebpackPlugin({
template: 'src/index.pug'
}),
new webpack.DefinePlugin({
'process.env': {
LINKEDIN_CLIENT_ID: JSON.stringify(process.env.LINKEDIN_CLIENT_ID),
API_URL: JSON.stringify(process.env.API_URL),
MIXPANEL_KEY: JSON.stringify(process.env.MIXPANEL_KEY),
WEB_APP_URL: JSON.stringify(process.env.WEB_APP_URL),
}
}),
new CopyWebpackPlugin([
{
from: 'src/images',
to: 'assets/images'
},
]),
]
};
/* eslint-enable */
index.js
import 'Styles/main.scss';
import Vue from 'vue/dist/vue.js';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
Vue.config.productionTip = false;
import App from 'Components/App.vue';
const CompanyPage = {template: '<div>foo</div>'};
const CompanyData = {template: '<div>bar</div>'};
const router = new VueRouter({
routes: [
{
path: '/',
name: 'Company Page',
component: CompanyPage
},
{
path: '/company-page',
name: 'Company Page',
component: CompanyPage
},
{
path: '/company-data',
name: 'Company Data',
component: CompanyData
}
]
});
const app = new Vue({
router,
render: createEle => createEle(App)
}).$mount('#app');
App.vue
<template>
<div id="app">
<top-nav/>
<div class="wrapper">
<breadcrumbs/>
<div class="content">
content
</div>
<left-nav/>
</div>
<router-view></router-view>
</div>
</template>
<script>
import TopNav from 'Components/TopNav.vue';
import Breadcrumbs from 'Components/Breadcrumbs.vue';
import LeftNav from 'Components/LeftNav.vue';
export default {
components: {
TopNav,
Breadcrumbs,
LeftNav
},
name: 'App'
};
</script>
LeftNav file
<template>
<div class="leftnav">
<ul >
<li>
<router-link to="/company-page">
Company Page
</router-link>
</li>
<li><a href="#">Co
</a></li>
<li>
<router-link
to="/company-data"
>
Company Data
</router-link>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'LeftNav'
};
</script>
package.json
{
"name": "frontend-assignment",
"version": "1.0.0",
"description": "",
"main": "index.js",
"engines": {
"node": "8.4.0",
"npm": "5.4.1"
},
"scripts": {
"clean:build": "./node_modules/.bin/rimraf build",
"predev": "npm run clean:build",
"dev": "cross-env NODE_ENV=development ./node_modules/.bin/webpack-dev-server",
"lint": "node_modules/.bin/eslint \"src/**/**.+(js|vue)\"",
"test": "node_modules/.bin/jest",
"start": "npm run dev"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"vue": "2.6.8",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
},
"devDependencies": {
"#babel/core": "^7.1.6",
"#vue/test-utils": "^1.0.0-beta.29",
"autoprefixer": "^9.3.1",
"babel-core": "^6.26.3",
"babel-jest": "^23.6.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-3": "^6.24.1",
"clean-webpack-plugin": "^1.0.0",
"copy-webpack-plugin": "^4.6.0",
"cross-env": "^5.2.0",
"css-loader": "^1.0.1",
"cssnano": "^4.1.7",
"dotenv": "^6.1.0",
"eslint": "5.9.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-import-resolver-webpack": "^0.10.1",
"eslint-loader": "^2.1.1",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jest": "^22.1.0",
"eslint-plugin-jsx-a11y": "^6.1.2",
"eslint-plugin-react": "^7.11.1",
"eslint-plugin-vue": "^5.0.0-beta.5",
"faker": "^4.1.0",
"file-loader": "^2.0.0",
"html-webpack-plugin": "^3.2.0",
"jest": "^23.6.0",
"mini-css-extract-plugin": "^0.4.4",
"node-sass": "^4.10.0",
"postcss-loader": "^3.0.0",
"pug": "^2.0.3",
"pug-loader": "^2.4.0",
"pug-plain-loader": "^1.0.0",
"raw-loader": "^0.5.1",
"rimraf": "^2.6.2",
"sass-loader": "^7.1.0",
"sass-resources-loader": "^2.0.0",
"url-loader": "^1.1.2",
"vue-jest": "^3.0.1",
"vue-loader": "^15.4.2",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "2.6.8",
"webpack": "^4.25.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
}
}

Answer 1

This happened to me recently after upgrading vue-router from 3.0.1 to 3.1.5 - It may be a version incompatibility issue or a bug in 3.1.5. After downgrading everything started working again fine.