子路由嵌套子路由

第一級子路由 Main.vue

<template><div style="border:1px solid #333;padding:20px 50px;margin:20px 0px;">這是一級路由<router-view></router-view></div> </template> <script> export default {data () {return {}} } </script>

第二級子路由 home.vue

<template><div style="border:1px solid #333;padding:20px 50px;margin:20px 0px;">這是二級路由<router-view></router-view></div> </template> <script>export default {data() {return {};}} </script>

第三級子路由 hello.vue

<template><div style="border:1px solid #333;padding:20px 50px;margin:20px 0px;">這是三級路由<router-view></router-view></div> </template> <script>export default {data() {return {};}} </script>

?

router里的路由配置

import Vue from 'vue' import Router from 'vue-router' // import Main from '@/components/HelloWorld' Vue.use(Router)export default new Router({routes: [{path: '/',redirect: '/home'},{path: '/main', //第一級子路由的可以單是 '/'這樣訪問路徑里可以沒有‘/main’name: 'Main',component: resolve => require(['../components/Main.vue'], resolve),meta: { title: '第一級子路由' },children: [{path: 'home',name: 'Home',component: resolve => require(['../components/home/home.vue'], resolve),meta: { title: '第二級子路由' },
　　　　　　redirect: '/main/home/hello',children: [{path: 'hello',name: 'Hello',component: resolve => require(['../components/home/hello.vue'], resolve),meta: { title: '第三級子路由' }}]}]},{path: '/login',name: 'Login',component: resolve => require(['../components/Login.vue'], resolve)}] })

?

轉載于:https://www.cnblogs.com/aidixie/p/10373353.html

總結

以上是生活随笔為你收集整理的子路由里嵌套子路由、嵌套多重子路由的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。