Vue2.0路由学习探索总结---嵌套路由-原创手记-慕课网

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

resharpe 2016-12-10 10:50:25 浏览 6681

resharpe

关注TA

手记 102

粉丝 7244

获赞 3476

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>嵌套路由</title>
    <script src="../vue.js"></script>
    <script src="../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>

相关标签: Vue.js

7人推荐

发表评论