Vue Vue-route （3）

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 嵌套路由配置、使用示例。