1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9.     <script src="./lib/vue.js"></script>
    10.     <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    11. </head>
    13. <body>
    14.     <div id="app">
    15.         <a href="#/login" >登陆</a>
    16.         <a href="#/register" >注册</a>
    18.         <router-view></router-view>
    20.         <!--router-link标签上面a标签效果一样  -->
    21.         <router-link to="/login" tag="span">登录</router-link>
    22.         <router-link to="/register">注册</router-link>
    24.     </div>
    29.     <script>
    30.         var register = {
    31.             template: "<div><h1> 注册页面</h1></div >"
    32.         }
    33.         var login = {
    34.             template: "<div><h1> 登录页面</h1></div >"
    35.         }
    37.         router = new VueRouter({
    38.             routes: [
    39.                 // 请求的是根路径就重定向#/login登陆页面
    40.                 { path: '/', redirect: "/login" },
    41.                 { path: '/login', component: login },
    42.                 { path: '/register', component: register }
    43.             ]
    44.             // routes // (缩写) 相当于 routes: routes
    45.         })
    47.         var vm = new Vue({
    48.             el: '#app',
    49.             data: {},
    50.             methods: {},
    51.             router: router
    52.         });
    53.     </script>
    54. </body>
    56. </html>

    2.gif