Vue router-link가 URL을 변경하지만 라우터 뷰 컴포넌트는 변경하지 않음

Vue router-link가 URL을 변경하지만 라우터 뷰 컴포넌트는 변경하지 않음

방금 vue-router를 사용하기 시작했어요.기본적으로 router-link를 클릭할 때마다 URL은 변경되지만 브라우저를 새로 고치지 않는 한 router-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
    });

패키지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"
  }

웹 팩 구성 저도 웹 팩을 처음 사용하는 사람이라 여기서 문제가 발생할 수 있습니다.

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가 검출되지만 액티브루트에는 영향을 주지 않습니다.

라우터 뷰에 키 속성을 기입하기만 하면 됩니다.

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

이는 vue가 최소 컨텐츠를 변경하려고 시도하기 때문에 발생합니다.

루트 컴포넌트를 .js 파일로 정의하려고 하면 웹 팩을 잘못 사용한 것이 판명되었습니다.여기서 해결책을 찾았습니다.

언급URL : https://stackoverflow.com/questions/59088216/vue-router-link-changes-url-but-does-not-change-router-view-component