The parameters of the vue route jump address bar have changed, and the content of the corresponding component is gone.

Brotherhood question link: https://codeshelper.com/q/10.
displays the text on the home page by default

clipboard.png


http://localhost:8080/Fen

clipboard.png

app.vue

<template>
  <div id="app">
    <Header></Header>

    <div class="main">
      <keep-alive>
          <router-view></router-view>
      </keep-alive>
    </div>
    
    <Footer></Footer>
  </div>
</template>

router/index.js

import Vue from "vue"
import Router from "vue-router"
import Home from "@/components/Home"
import Fen from "@/components/Fen"
import Cart from "@/components/Cart"
import Center from "@/components/Center"
Vue.use(Router)

export default new Router({
  mode: "history",
  watch: {  
  "$route" (to, from) {  
    // data  
  }  
} ,
  routes: [
    {
      path: "/",
      name: "Home",
      component: Home
    },
    {
      path: "/",
      name: "Fen",
      component: Fen
    },
    {
      path: "/",
      name: "Cart",
      component: Cart
    },
    {
      path: "/",
      name: "Center",
      component: Center
    }
  ]
})

your path is wrong, it's all /
you should write different path according to different paths


The address in

url is / Fen
, but the address of the Fen component in your registered route is

{
    path: '/',
    name: 'Fen',
    component: Fen
}
// 
{
    path: '/Fen',
    name: 'Fen',
    component: Fen
}

can

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-1be7def-318a6.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-1be7def-318a6.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?