Question

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

这是我的密码。

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更改，但不影响活动路由。

Answer 1

因此，事实证明，我尝试将根组件定义为.js文件时使用了webpack错误。找到了解决方案here。

Answer 2

只需在路由器视图中写入关键属性：

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

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

Vue路由器链接更改url，但不更改路由器视图组件

2 个答案: