Vue实现从导航栏跳转到全新页面（此时不包含导航栏）

目录

场景

方法

完整代码

index.js:

App.vue

Mine.vue

Nav.vue

Home.vue

Sub1.vue

Sub2.vue

Shop.vue

---

场景

如图，点击我的我的音乐时，导航栏下刷新页面，点击客户端时，导航栏消失，跳转至全新页面

方法

使用嵌套路由实现，这里自编例子效果如下图：

点击主页、购物车时出现主页、购物车页面，点击个人中心时导航栏消失

vue中目录组织结构如下图所示：

实现上述效果关键在于路由的配置

这里路由的层级为：

App.vue中为根渲染页面，Nav、Mine页面在这里渲染，即Nav、Mine为App的子路由

Nav为二级渲染页面，Home、Shop在这里渲染，即Home、Shop为Nav的子路由

Home为三级渲染页面，Sub1、Sub2在这里渲染 ，即Sub1、Sub2为Home的子路由

点击Home时，Home在Nav渲染，Nav又在App中渲染，因此Home会在App中渲染，Nav会一直存在，Shop同理，

点击Mine时，Mine直接在App中渲染，Nav不会存在。

完整代码

index.js:

import Vue from 'vue'
import Router from 'vue-router'

import Nav from '@/components/Nav.vue'
import Home from '@/components/Home.vue'
import Mine from '@/components/Mine.vue'
import Shop from '@/components/Shop.vue'
import Sub1 from '@/components/Sub1.vue'
import Sub2 from '@/components/Sub2.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      redirect: {
        name:'Home'
      },
      component: Nav,
      children:[
        {
          path: '/Home',
          name:'Home',
          component: Home,
          children:[
            {
              path: '/Sub1',
              component: Sub1,
            },
            {
              path: '/Sub2',
              component: Sub2,
            },

          ]
        },
        {
          path: '/Shop',
          name:'Shop',
          component: Shop
        }
      ]
    },

    {
      path: '/Mine',
      component: Mine,
    },

  ]
})

App.vue

<template>
  <div id="app" style="background: yellow;height: 500px" >
    <p>这是APP.vue页面（根目录渲染页面）</p>
    <router-view></router-view>
  </div>

</template>
<script>
  export default {
    data(){
      return{
        para:{para1:"这是参数1",para2:"这是参数2"}
      }
    }
  }
</script>

Mine.vue

<template>
  <div class="Mine" style="background:red;height: 300px">
    <p>
      这是Mine页面
    </p>
  </div>
</template>

Nav.vue

<template>
  <div id="first" style="background:red;height: 300px">
    <p>这是Nav页面(二级路由渲染页面）</p>
    <button   @click="toHome">主页</button>
    <button   @click="toShop">购物车</button>
    <button   @click="toMine">个人中心</button>
    <router-view></router-view>
  </div>

</template>
<script>
  export default {
    methods:{
      toHome(){
        this.$router.push({ path: '/Home' })
      },
      toShop(){
        this.$router.push({ path: '/Shop' })
      },
      toMine(){
        this.$router.push({ path: '/Mine' })
      }
    }
  }
</script>

Home.vue

<template>
  <div class="Home" style="background: gray;height: 200px">
    <p>
      这是Home页面(三级路由渲染页面）
    </p>
    <button   @click="toSub1">Sub1</button>
    <button   @click="toSub2">Sub2</button>
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    methods:{
      toSub1(){
        this.$router.push({ path: '/Sub1' })
      },
      toSub2(){
        this.$router.push({ path: '/Sub2' })
      }
    }
  }
</script>

Sub1.vue

<template>
  <div class="Sub1" style="background:green;" >
    <p>这是Sub1页面</p>

  </div>
</template>

Sub2.vue

<template>
  <div class="Sub2" style="background:green;">
    <p>这是Sub2页面</p>
  </div>
</template>

Shop.vue

<template>
  <div class="Shop" style="background: gray;">
    <p>这是shop页面</p>
  </div>
</template>