首页手记 Vue2.0路由学习探索总结---嵌套路由

Vue2.0路由学习探索总结---嵌套路由

标签：

Vue.js

Vue2.0路由学习探索总结---嵌套路由

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>嵌套路由</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../vue.js"></script>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../vue-router.js"></script>
    <style>
        .router-link-active {
            color: red
        }
    </style>
</head>
<body>
<div id="app">
    <p>
        <router-link to="/user/foo">/user/foo</router-link>
        <router-link to="/user/foo/profile">/user/foo/profile</router-link>
        <router-link to="/user/foo/posts">/user/foo/posts</router-link>
    </p>
    <router-view></router-view>
</div>
</body>
<script>
    const User = {
        template: `
    <div class="user">
      <h2>User {{ $route.params.id }}</h2>
      <router-view></router-view>
    </div>
  `
    }
    const UserHome = {template: '<div>Home</div>'}
    const UserProfile = {template: '<div>Profile</div>'}
    const UserPosts = {template: '<div>Posts</div>'}
    const router = new VueRouter({
        routes: [
            {
                path: '/user/:id', component: User,
                children: [
                    {path: '', component: UserHome},
                    {path: 'profile', component: UserProfile},
                    {path: 'posts', component: UserPosts}
                ]
            }
        ]
    });
    const app = new Vue({router}).$mount('#app')
</script>
</html>

点击查看更多内容