роутер-ссылка не рендерит

Question

router-link не выдает ошибку, но не работает. Это показывает только строку. Я перепробовал все посты по этой проблеме, но ни один из них не сработал. Пожалуйста, помогите

Вот мой файл:

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

<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"
  }
}