Vue实现从导航栏跳转到全新页面(此时不包含导航栏)
目录场景方法完整代码index.js:App.vueMine.vueNav.vueHome.vueSub1.vueSub2.vueShop.vue场景如图,点击我的我的音乐时,导航栏下刷新页面,点击客户端时,导航栏消失,跳转至全新页面方法使用嵌套路由实现,这里自编例子效果如下图:点击主页、购物车时出现主页、购物车页面,点击个人中心时导航栏消失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>
更多推荐
已为社区贡献5条内容
所有评论(0)