How does the router of vue import the build?

import ListCard from "../components/ListCard.vue"
import Cooker from "../components/Cooker.vue"
const  routers = [
    {
        path: "/",
        redirect: "/list",
    },
    {
        path: "/list",
        name: "",
        component: ListCard
    },
    {
        path: "/grasp",
        name: "grasp",
        component: Cooker
    }

]

as shown in the figure, this way, it is impossible to achieve Synchronize data and interface at all.
v-for never refreshes the interface. Although listss has changed.

 {{listss}}
        <div v-for="(pp, index) in listss" :key="index" class="sonbi" @dblclick="showDetail(pp)">
            <h2 class="ttl">
            {{pp.name}}
            </h2>
        </div>

you can"t write it this way:

const  routers = [
    {
        path: "/",
        redirect: "/list",
    },
    {
        path: "/list",
        name: "",
        component: () => import("@/components/ListCard.vue")
    },
    {
        path: "/grasp",
        name: "grasp",
        component: () => import("@/components/Cooker.vue")
    }

]

export default routers

package.json.

initialized with vue-cli
{
  "name": "generation-frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "vue": "^2.5.17"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.2.0",
    "@vue/cli-plugin-eslint": "^3.2.0",
    "@vue/cli-service": "^3.2.0",
    "axios": "^0.18.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.8.0",
    "eslint-plugin-vue": "^5.0.0-0",
    "iview": "^3.1.5",
    "query-string": "^6.2.0",
    "vue-router": "^3.0.2",
    "vue-template-compiler": "^2.5.17"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}
Jan.15,2022

I think your real problem is that the data has been updated and the view has not been updated.


the router array is not in data, which is definitely not responsive, and what is the requirement for you to use the router array in the component? Why the data written in router should be changed needs to be clearly described


has been resolved. It turned out to be a build of Modal, at the same level as the location of this div. Caused the problem.

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-7b8e4a-29de2.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-7b8e4a-29de2.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?