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
        });

路由的例項