Vue Vue-route （3）-优快云博客

本文链接：https://blog.youkuaiyun.com/json_ligege/article/details/149054714

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
  },
  ......
]