Vue router-link changes url but does not change router-view component

Question

Just started using vue-router. Basically, whenever I click on a router-link, the URL changes but the router-view doesn't change the component being rendered unless I refresh the browser.

Here are my codes.

HTML

    <div id="app">
      <router-link to="/" exact>Home</router-link>
      <router-link to="/about">About</router-link>

      <router-view></router-view>
    </div>

JS

    import Vue from "vue";
    import VueRouter from "vue-router";

    Vue.use(VueRouter);

    import HomeComponent from "./assets/js/views/Home.vue";
    import AboutComponent from "./assets/js/views/About.vue";

    let router = new VueRouter({
      routes: [
        {
          path: "/",
          component: HomeComponent
        },
        {
          path: "/about",
          component: AboutComponent
        }
      ]
    });

    new Vue({
      el: "#app",
      router
    });

Package.json snippet

  "scripts": {
    "build": "webpack --display-error-details",
    "dev": "webpack-dev-server"
  },
  "devDependencies": {
    "@babel/core": "^7.7.4",
    "@babel/preset-env": "^7.7.4",
    "axios": "^0.19.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.6",
    "babel-preset-env": "^1.7.0",
    "css-loader": "^3.2.0",
    "dotenv": "^8.2.0",
    "electron": "^7.1.2",
    "file-loader": "^5.0.2",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.8.0",
    "node-sass": "^4.13.0",
    "sass-loader": "^8.0.0",
    "style-loader": "^1.0.0",
    "vue": "^2.6.10",
    "vue-axios": "^2.1.5",
    "vue-loader": "^15.7.2",
    "vue-router": "^3.1.3",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.10",
    "vuex": "^3.1.2",
    "webpack-dev-server": "^3.9.0"
  },
  "dependencies": {
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10"
  }

Webpack Config I'm also new with webpack so the problem might come from here

const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const VueLoaderPlugin = require("vue-loader/lib/plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "babel-loader"
          }
        ]
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        loader: "file-loader"
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
            options: { minimize: true }
          }
        ]
      },
      {
        test: /\.scss$/,
        use: ["style-loader", "vue-style-loader", "css-loader", "sass-loader"]
      },
      {
        test: /\.vue$/,
        loader: "vue-loader"
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    }),
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    }),
    new VueLoaderPlugin()
  ],
  resolve: {
    alias: {
      vue$: "vue/dist/vue.esm.js"
    }
  }
};

Also, on the vue-devtools, it detects the url-changes, but it does not affect the active route.

@Jalasem oh right forgot about that. Updated the details above to show my package.json and webpack config — MeepMerp
Could you share a jsfiddle where we can see that the code does not work? — Ankit Kante
This is already resolved. Thanks to those who tried to help. — MeepMerp

MeepMerp MeepMerp · Accepted Answer · 2019-11-28T15:11:51

So it turns out that I've used webpack wrong by trying to define the root component as a .js file. Found the solution here.

Vue router-link changes url but does not change router-view component

2 Answers