Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue-route嵌套路由
目录
Vue-route路由
嵌套路由
之前定义的都是一级路由，那如何定义二级路由，甚至多级路由？
创建页面
在定义二级路由前，需要选创建相应的页面；
为了结构分明，创建以一级路由文件名称的文件夹下创建二级页面。
示例如下：
定义二级路由
先导入页面然后在router/index.js中相应路由配置下，
设置children属性来定义二级路由。
示例如下：
import Vue from 'vue'
import VueRouter from 'vue-router'
import Films from '@/views/FilmsView'
import Cinemas from '@/views/CinemasView'
import Center from '@/views/CenterView'
import NowPlaying from '@/views/films/NowPlaying'
import ComingSoon from '@/views/films/ComingSoon'
Vue.use(VueRouter) // 注册路由插件
// 配置表
const routes = [
{
path: '/films',
name: 'films',
component: Films,
children: [
{
path: '/films/nowplaying',
component: NowPlaying
},
{
path: '/films/comingsoon',
component: ComingSoon
}
]
},
{
path: '/cinemas',
name: 'cinemas',
component: Cinemas
},
{
path: '/center',
name: 'center',
component: Center
},
{
path: '/',
name: 'films',
component: Films
},
{
path: '*',
component: Films
}
]使用二级路径
在filmsView页面把二级路径插入节点。
示例如下：
<template>
<div>
<div style="height:200px;background:yellow;">大轮播</div>
<div>
二级的声明式导航
</div>
<router-view></router-view>
</div>
</template>
设置二级导航默认
二级路径也可以设置默认显示，还是在router/index.js中。
示例如下：
// 配置表
const routes = [
{
path: '/films',
name: 'films',
component: Films,
children: [
{
path: '/films/nowplaying',
component: NowPlaying
},
{
path: '/films/comingsoon',
component: ComingSoon
},
{
path: '/films',
redirect: '/films/nowplaying'
}
]
},非二级路径
创建搜索页面
在views下创建SearchView页面文件。
示例如下：
设置路由
有些路由看似是二级路由，但如果直接替换一级路由内容，则并非从属一级路由；
而只是显示为二级路由。如电影页面上显示很多电影列表信息，
但是一点击搜索则全部替换为搜索页面。
示例如下：
import Vue from 'vue'
import VueRouter from 'vue-router'
import Films from '@/views/FilmsView'
import Cinemas from '@/views/CinemasView'
import Center from '@/views/CenterView'
import NowPlaying from '@/views/films/NowPlaying'
import ComingSoon from '@/views/films/ComingSoon'
import Search from '@/views/SearchView'
Vue.use(VueRouter) // 注册路由插件
// 配置表
const routes = [
{
path: '/films',
name: 'films',
component: Films,
children: [
{
path: '/films/nowplaying',
component: NowPlaying
},
{
path: '/films/comingsoon',
component: ComingSoon
},
{
path: '/films',
redirect: '/films/nowplaying'
}
]
},
{
path: '/cinemas',
name: 'cinemas',
component: Cinemas
},
{
path: '/cinemas/search',
name: 'search',
component: Search
},
......
]
总结
Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue-route 嵌套路由配置、使用示例。