深圳电商网站制作企业网站制作教程
Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue-route嵌套路由
目录
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 嵌套路由配置、使用示例。