Vue嵌套路由的使用方法及注意事项

Vue嵌套路由的使用方法及注意事项

原文参考：https://blog.csdn.net/weixin_41967475/article/details/116868375

借助vue-router，使用嵌套路由

router-view 不仅可以作为最顶层的出口，渲染最高级路由匹配到的组件；还可以作为被渲染组件嵌套路由的出口。

1、router-view 作为最顶层的出口

<div id="app">
  <router-view></router-view>
</div>

const User = {
  template: '<div>我是User组件</div>'
}

const router = new VueRouter({
  routes: [{ path: '/user', component: User }]
})

2、router-view 作为被渲染组件嵌套路由的出口

要在嵌套的出口中渲染组件，需要在 VueRouter 的参数中使用 children 配置。

使用 children 参数实现子路由，需要先定义后引用，懒加载component: () =>{}会失效。

使用 children 参数实现子路由，子路由的 path，不要带 / ，这让你充分的使用嵌套组件而无须设置嵌套的路径；而以 / 开头的嵌套路径会被当作根路径，这样不方便我们用户去理解URL地址。

# My.vue
---------------------------------------------------------------------
<template>
    <div class="my">
    	<div>我是My组件，嵌套路由别忘了加 router-view 哦！</div>
        <router-view></router-view>
    </div>
</template>

<script>
export default{
	name: "My",
	data(){
		return{}
	},
	methods:{},
	mounted(){}
}
</script>

<style scoped>

</style>

# router/index.js
---------------------------------------------------------------------
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

// 使用children嵌套路由，需要先定义后引用，懒加载component: () =>{}会失效
import login from '../views/my/login/index'

const routes = [
  {
    path: '/my',
    name: 'My',
    component: () => import('../views/my/index'),
    // 使用 children 属性，实现子路由，同时，子路由的 path 前面，不要带 / ，
    //否则永远以根路径开始请求，这样不方便我们用户去理解URL地址
    children: [{
        path: 'login',
        name: 'Login',
        component: login
      }
    ]
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

3、空的子路由

当匹配不到合适的子路由，而你又想要渲染点什么，可以提供一个空的子路由。

比如，当你访问/user/foo路由时，没有匹配到合适的子路由，此时UserHome 会被渲染在 User 的 router-view 中

const router = new VueRouter({
  routes: [
    {
      path: '/user',
      component: User,
      children: [
        { 
        	path: '', 
        	component: UserHome 
        }
      ]
    }
  ]
})

PS：偷偷学前端，然后惊艳所有人