After the vue router redirection, the address changes and the content remains the same. Solve the problem.

the effect you want to achieve is that if you enter your own address: localhost:8080/detail/detail can jump to the current address of localhost:8080/detail/detailInfo, but the content is still the content under localhost:8080/detail/detail
path:
import detialPage from". / components/detial/detial"
import detialInfo from". / components/detial/detialInfo"

clipboard.png

{
          path:"/detial",
          component: detialPage,
          children:[
            {
              path:"detialInfo",
              component:detialInfo,
              meta: { 
                requiresAuth: true 
              }
            }
          ],
          redirect:"/detial/detialInfo",
          meta: {
            requiresAuth: true 
          }
        }

configure all

import Vue from "vue"
import Router from "vue-router"
import Index from "../components/index"
import Classify from "../components/classify"
import Cart from "../components/cart"
import Center from "../components/center"
import Welcome from "../components/welcome"
import Login from "../components/login"
import Common from "../common"
import father from "../components/father"
import detialPage from "../components/detial/detial"
import detialInfo from "../components/detial/detialInfo"
Vue.use(Router)



export default new Router({
    mode: "history",
  routes: [
    {
      path: "/f",
      component: father // 
    },
    {
      path: "/login",
      component: Login // 
    },
    {
      path: "/welcome",
      component: Welcome // 
    },
    {
      path: "",
      component: Common, //  App.vue
      children: [
        {
          path:"/detial",
          component: detialPage,
          children:[
            {
              path:"detialInfo",
              component:detialInfo,
              meta: { 
                requiresAuth: true 
              }
            }
          ],
          redirect:"/detial/detialInfo",
          meta: {
            requiresAuth: true 
          }
        },
        {
          path: "/",
          component: Index,
          meta: { 
            requiresAuth: true 
          }
        },
        {
          path: "/classify",
          component: Classify,
          meta: { 
            requiresAuth: true 
          }
        },
        {
          path: "/cart",
          component: Cart,
          meta: { 
            requiresAuth: true 
          }
        },
        {
          path: "/center",
          component: Center,
          meta: { 
            requiresAuth: true 
          }
        }
      ]
    }
  ]
})
Mar.07,2021

path:'/detial/detial' //

what you are writing is jumping from / detail to / detail/detailInfo, that is, the component detialPage has been replaced by detialInfo

.
Menu