VUE路由相关知识

配置路由

1、二级路由
2、三级路由
3、若路由错误跳转到统一404页面
4、路由传参

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
    {
        path: '/',
        name: 'home',
        component: () => import('@/views/Home.vue'),
        children: [
            {
                path: '/',
                name: 'creatApp',
                component: resolve => require(['@/components/home.vue'], resolve),
                meta: {
                  title: '首页',
                }
            },
            {
                path: '/userIndex',
                name: 'userIndex',
                component: resolve => require(['@/components/user/Index.vue'], resolve),
                children: [
                    {
                        path: '/userIndex',
                        name: 'personIndex',
                        component: resolve => require(['@/components/user/person/Index.vue'], resolve),
                        meta: {
                            title: '统计监控'
                        }
                    }
                ]
            },
         
        ]
    },
    {
        path: '*',
        name: '404',
        component: () => import('@/components/404/404.vue')
    }
]

const router = new VueRouter({
    mode: 'history',
    routes
})

export default router

<template>
  <div class="home">
    <NavMenu />
    <div class="home-content">
      <router-view/>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import NavMenu from "@/components/NavMenu.vue";

export default {
  name: "home",
data() {
    return {};
  },
  created() {
    // 接收路由传参
    this.$route.params
 },
  methods: {
    appDetail(key) {
      // 路由传参
      this.$router.push({
        name: `applicationIndex`,
        params: {
          appKey: key
        }
      });
    }
  },
  components: {
    NavMenu
  }
};
</script>

<style scoped lang="scss">
.home {}
</style>