Vue前端篇（三）添加页面路由

把components重命名为views，在此目录下新建Login.vue、Home.vue

Login.vue

<template>
  <div class="page">
    <h2>Login Page</h2>
  </div>
</template>

<script>
export default {
  name: 'Login'
}
</script>

Home.vue

<template>
  <div class="page">
    <h2>Home Page</h2>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

添加路由：在router下的index.js中配置Login和Home页面

index.js

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '../views/HelloWorld'
import Login from '../views/Login'
import Home from '../views/Home'

Vue.use(Router)

export default new Router({
  routes: [
    // {
    //   path: '/',
    //   name: 'HelloWorld',
    //   component: HelloWorld
    // },
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/Login',
      name: 'Login',
      component: Login
    }
  ]
})

分别访问http://localhost:8081/#/和http://localhost:8081/#/login

首页：http://localhost:8081/#/

登录页面：http://localhost:8081/#/login

我们把V这个logo给去掉：在App.vue中注释掉img