vue.js - vue 构建二级页面,怎么才能将首页的导航去掉?
本文介绍了vue.js - vue 构建二级页面,怎么才能将首页的导航去掉?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
项目有一个首页导航,现在想创建一个二级页面product,点进去之后,不附带首页的任何东西,查了相关资料说是要通过路由嵌套来实现,尝试之后还是不行。有人来帮忙指点一下吗?
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from "./App.vue"
import Hello from "./components/Hello.vue"
import Home from "./components/Home.vue"
import Work from "./components/Work.vue"
import Logtime from "./components/Logtime.vue"
import Lunbo from "./components/Lunbo.vue"
import Product from "./components/Product.vue"
Vue.use(VueRouter)
const routes = [{
path:'/',
component:Home,
children:[
{
path:'product',
component:Product
}
]
},
{
path:'/hello',
component:Hello
},
{
path:'/home',
name:'home',
component:Home,
children:[
{
path:'product',
name:'product',
component:Product
}
]
},
{
path:'/app',
component: App
},
{
path:'/work',
component: Work
},
{
path:'/logtime',
component: Logtime
},
{
path:'/lunbo',
component: Lunbo
}]
const router = new VueRouter({
routes
})
export default router; //将路由器导出
解决方案
那你别嵌套,跟首页同级,如果你做为首页的子路由,肯定会用到首页的模版。
{
path:'/',
component:layout,//这个组件中不放你所说的导航其它任何东西
children:[
{
path:'/home',
component:Home,
},
{
path:'/home/product',
component:Product
}
]
}
这篇关于vue.js - vue 构建二级页面,怎么才能将首页的导航去掉?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文