vue路由嵌套完整步骤

admin管理员组

文章数量:1633739

1.建一个文件夹,里面放三个文件

pages文件夹,里面存放接下来需要展示的组件

router文件夹,里面存放index.js ,在里面设置路由规则

app.vue父组件

2.在app.vue文件设置内容

<template>
  <div>
    <p>
      <router-link to="/home">主页</router-link> &nbsp;&nbsp;
      <router-link to="/news">新闻</router-link>&nbsp;&nbsp;
      <router-link to="/sport">体育</router-link>&nbsp;&nbsp;
    </p>
    <!-- 一级路由出口 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
}
</script>

<style>
</style>

3.在pages文件夹创建3个文件==>1.Home.vue 2.Sports.vue 3.News.vue

分别在各自组件中设置各自需要展示的内容

4.在router文件夹下的index.js配置路由规则

//引入插件
import VueRouter from 'vue-router'
import Vue from 'vue'
//使用插件
Vue.use(VueRouter)

//导入组件
import Home from '../pages/Home.vue'
import News from '../pages/News.vue'
import Sports from '../pages/Sports.vue'


//创建路由规则
const router = new VueRouter({
  routes: [
    {
      path: '/home',  //地址栏输入这个关键字
      component: Home  //跳转到这个组件
    },
    {
      path: '/news',
      component: News
    },
    {
      path: '/sport',
      component: Sports,     
    },

  ]
})

//导出
export default router

5.在项目文件夹的main.js设置入口

import Vue from 'vue'

import App from './45.嵌套路由/App.vue'  //父组件启动
import router from './45.嵌套路由/router/index.js'  //路由配置文件启动





new Vue({
  router,  //这里需要设置一下启用
  render: h => h(App),
}).$mount('#app')

6.至此,一级路由已设置完成,接下来设置二级路由

7,在Sports.vue组件下设置内容,再创建3个组件==>1.SportsHome.vue 2.SportsCha.vue 3.SportsUSA.vue,分别设置各自组件需要展示的内容

<template>
  <div>
    <h2>体育改变人生</h2>
    <router-link to="/homes">体育主页</router-link> &nbsp;&nbsp;
    <router-link to="/china">国内</router-link>&nbsp;&nbsp;
    <router-link to="/usa">国外</router-link>&nbsp;&nbsp;
    <!-- 二级路由出口 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  // mounted () {
  //   // console.log('页面的query参数是', this.$route.query);
  // },

}
</script>

<style>
</style>

8.回到index.js路由配置文件,在sports组件下添加children属性,再配置路由规则

import VueRouter from 'vue-router'
import Vue from 'vue'
//使用插件
Vue.use(VueRouter)

//导入组件
import Home from '../pages/Home.vue'
import News from '../pages/News.vue'
import Sports from '../pages/Sports.vue'
import SportsUSA from '../pages/SportsUSA.vue'
import SportsCha from '../pages/SportsCha.vue'
import SportsHome from '../pages/SportsHome.vue'

//创建路由规则
const router = new VueRouter({
  routes: [
    {
      path: '/home',
      component: Home
    },
    {
      path: '/news',
      component: News
    },
    {
      path: '/sport',
      component: Sports,
      //体育下的二级路由
      children: [
        {
          path: '/china',
          component: SportsCha
        },
        {
          path: '/usa',
          component: SportsUSA
        },
        {
          path: '/homes',
          component: SportsHome
        },


      ]
    },

  ]
})

//导出
export default router

至此已完成二级嵌套,根据实际需求可进行多次嵌套

本文标签： 嵌套路由步骤完整vue