html

<div id="app">
    <router-link to="/account">Account</router-link>
    <router-view></router-view>
</div>

<template id="tmp1">
    <div>
        <h1>这是 Account 组件</h1>
        <router-link to="/account/login">登录</router-link>
        <router-link to="/account/register">注册</router-link>
        <!-- 不推荐，不方便用户理解url地址 -->
        <!--<router-link to="/login">登录</router-link>-->
        <!--<router-link to="/register">注册</router-link>-->
        <router-view></router-view>
    </div>
</template>

js

        let account = {
            template: '#tmp1'
        };

        let login = {
            template: '<h2>我是登录！</h2>'
        };

        let register = {
            template: '<h2>我是注册！</h2>'
        };

        let router = new VueRouter({
            routes: [
                {
                    path: '/account',
                    component: account,

                    //在 router-link 中指定了路径，所有下面的子路径前面不加 '/'
                    //否则永远以根路径开始请求，不方便用户理解url地址
                    children: [
                        //推荐，跟路由url后缀为 #/account/register
                        {path: 'login', component: login},
                        {path: 'register', component: register},

                        //不推荐，根路径url后缀为 #/register
                        // {path: '/login', component: login},
                        // {path: '/register', component: register}
                    ]
                }
            ]
        });

        let vm = new Vue({
            el: '#app',
            data: {},
            methods: {},
            router
        });

路由的实例