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

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
    }
  ]
})

Javascript vue.js vue-router

Mar.02,2021

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

Previous: The home page needs to call multiple API to get data and render the view. How to optimize it?

Next: Vue.js routing query

On the keep-alive problem of vue
scenario: there are An and B pages keep-alive setting: include= "A ", only A pages are cached A page has c components when An is loaded for the first time, manually jump to the B page and return then the problem occurs, even the mounted of th...

Javascript vue.js vue-router

Mar.13,2021
The problem that vue dynamic paths and multiple routes share the same component
ask a question from vue. I now have a scenario where multiple sidebar navigation routes point to the same page (note that sidebar navigation will be explained later). All that has changed is the data in the List list. The route now says "die ". How t...

Javascript vue.js vue-router

Apr.06,2021
How does vue-router router-link change the value of child elements
router-link tag has a img tag, how to change the picture of img according to the activation state of router-link the code is as follows: ` < router-link to= " chat " > < router-link > because .router-link-active itself has a graded b...

Javascript vue.js vue-router css html

Apr.15,2021
Invalid vue addRouters refresh problem
read all over the Internet, none of those shared is valid! the default front end only writes the following routes, and the rest is given to the data by the back end, and then addRouters. { path: login , name: login , meta: { ...

Javascript vue.js vue-router

Jul.16,2021
Some problems encountered in the implementation of vue-cli packaging one code and sharing multiple projects
question now the requirement is to package a piece of code, but for multiple projects, it is packaged and put directly locally, and tested with tomcat services. For example, http: localhost:39090 segment fault a main http: localhost:39090 seg...

Javascript vue.js vue-router vue-cli

Oct.09,2021
[Vue warn]: Error in render: "InternalError: too much recursion"
vue routing error vue-router error related codes [Vue warn]: Error in render: "InternalError: too much recursion" found in ---> <RouterLink> <ElTooltip> <VHead> at src components common Header.vue...

Node.js javascript vue.js vue-router

Dec.06,2021
Background management permissions
use vue + element-ui to build a background project (scaffolding). Now you need to manage permissions in the background. As I have no experience, I would like to ask you for advice, such as how to dynamically generate routes when some pages are not displ...

Javascript vue.js vue-router

Mar.17,2022
How does vue keetp-alive affect watch $route?
Caiji encountered a problem: the router-view of app.vue is covered with a layer of keep-alive when switching between secondary pages, you can enter and leave watch $route however, if keepalive is removed, the watch is less than the entry and departu...

Javascript vue.js vue-router

Jul.01,2022