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屋！