vue.js - Vue router-link 更改 url 但不更改 router-view 组件

Question

刚开始使用vue-router。基本上，每当我单击路由器链接时，URL 都会更改，但路由器 View 不会更改正在呈现的组件，除非我刷新浏览器。

这是我的代码。

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 片段

  "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 配置 我也是 webpack 的新手，所以问题可能来自这里

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

另外，在 vue-devtools 上，它会检测 url-changes，但不会影响事件路由。

Answer 1

只需在路由器 View 中写入关键属性:

<router-view :key="$route.path"></router-view>

这是因为 vue 尝试更改最少的内容。