Vue学习 - 第一个页面开发（2）

在我们Vue项目创建完成后，进行下一步的学习开发 - 新增页面，并跳转访问，

项目创建及项目文件结构已经在上一篇博客有描述，此处部详细说明

1、在项目  /src/component 路径下新增文件夹 login，并在其下创建文件 Login.vue

login.vue页面内容如下：

<template>

  <div class="hello">
    <h2>This is Login Page !</h2>
  </div>

</template>

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

<style scoped>

</style>

如果文件格式有误，可以使用开发工具进行一键ES格式化处理

接下来修改我们的项目主页面 HelloWorld.vue ，使用 <router-link> 标签

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>

    <h2>
      <router-link to="login">页面跳转</router-link>
    </h2>

  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

 在router/index.js中添加路由：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/components/login/Login'

Vue.use(Router)

export default new Router({
  // 可以自行设置根路径目录
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    }
  ]
})

最后运行项目：