Vue 多级路由

Vue 多级路由

router/index.js

//引入文件，该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../components/Home'
import Home from '../components/About'
import Message from '../components/Message'

//创建并暴露一个路由器
export default new VueRouter({
    routes: [{
            path: '/about',
            component: About
        },
        {
            path: '/home',
            component: Home,
            children: [{    //通过children配置子级路由
                path: "message",      //这里不需要写‘/’斜杆
                component: Message
            }]
        }
    ]
})

页面中

	<router-link to="/home">home</router-link>
    <router-link to="/about">about</router-link>
    <router-link to="/home/message">message</router-link>
    <router-view></router-view>
1
2
3
4