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