Vue嵌套路由

最新推荐文章于 2024-03-17 23:25:53 发布

原创最新推荐文章于 2024-03-17 23:25:53 发布 · 213 阅读

0 ·

CC 4.0 BY-SA版权

前端同时被 2 个专栏收录

31 篇文章

订阅专栏

Vue

11 篇文章

订阅专栏

本文详细介绍了Vue项目中如何设置和使用嵌套路由，包括项目目录结构、主要配置文件的作用及代码实现，如App.vue、main.js和index.js等，展示了如何通过路由组件实现页面的嵌套显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目目录结构

|-- src
    |-- components
       |-- index
       |-- page
          |-- index2
    |-- router
       |-- index.js
    |-- App.vue
    |-- main.js

1、App.vue

<template>
    <-- HTML部分 -->
    <div id="app">
        <router-link to="/index">访问 2级 页面</router-link>
        <-- 2级页面在此显示-->
        <router-view></router-view>
    </div>
</template>

2、main.js（文件位置：src/main.js）

import Vue from 'vue'
import App from './App'                    //一级页面模板
import router from './router'              //引入router.js
import Vuex from 'vuex'
import Router from 'vue-router'            //路由组件已安装，声明路由
import VueResource from 'vue-resource'    

import './css/page.css'
Vue.config.productionTip = false

Vue.use(Vuex)
Vue.use(Router)              //使用路由
Vue.use(VueResource)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,                    //路由实例化
  components: { App },
  template: '<App/>'
})

3、index.js（文件位置：src/router/index.js）

import Vue from 'vue'
import Router from 'vue-router'
import home from '@/components/home'
import Index from '@/components/index'        //注册的路由

export default new Router({
  mode: 'history',            //去除地址栏中的 #
  routes: [{
      path: '/',
      name: 'home',
      component: home
    },
    {
      path: '/index',        //path: 地址栏中显示; 同时对应router-link 属性 to="/index"
      name: 'index',         //
      component: Index       //组件名称
    }
  ]
})

4、嵌套路由--页面

<template>
    <-- 2级页面所在 -->
    <div id="index">
        <router-link to="/index/index2">访问 3级 页面</router-link>
        <-- 3级页面在此显示-->
        <router-view></router-view>
    </div>
</template>

5、嵌套路由--index.js设置

import Vue from 'vue'
import Router from 'vue-router'
import home from '@/components/home'
import Index from '@/components/index'        //注册的路由
import Index2 from '@/components/page/index2'        //注册的路由

export default new Router({
  mode: 'history',            //去除地址栏中的 #
  routes: [{
      path: '/',
      name: 'home',
      component: home
    },
    {
      path: '/index',        //path: 地址栏中显示; 同时对应router-link 属性 to="/index"
      name: 'index',         //
      component: Index,       //组件名称
      children: [{                //使用children，children里即为子路由
        path: '/index/index2',    //为方便理解，设置为父/子形式
        name: 'index2',
        component: Index2        //组件名称
      }
      ]
    }
  ]
})