第三章 vue创建路由

一、创建vue文件

1）在components中新建三个文件Login.vue、Home.vue、404.vue

2）在三个页面中写入vue的基础结构

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

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

<style scoped>

</style>

3）打开router/index.js，加入3个路由

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Login from '@/components/Login'
import NotFound from '@/components/404'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    }, {
      path: '/login',
      name: 'Login',
      component: Login
    }
  , {
    path: '/404',
    name: 'NotFound',
    component: NotFound
  }

  ]
})

4. 运行效果

结语

到此结束路由就初步写好了