Vue项目-新建页面和新建路由

我们只建四个页面，在Views文件夹下新建四个以下四个页面
BlogDetail.vue（博客详情页）
BlogEdit.vue（编辑博客）
Blogs.vue（博客列表）
Login.vue（登录页面）
然后在页面中加div标签

<template>
<div>
  detail
</div>
</template>

接下来在在路由中心配置：
router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../views/Login.vue'
import BlogDetail from '../views/BlogDetail.vue'
import BlogEdit from '../views/BlogEdit.vue'
import Blogs from '../views/Blogs.vue'

Vue.use(VueRouter)

const routes = [
  {
    
    
    path: '/',
    name: 'Index',
    redirect: {
    
    name: "Blogs"}
  },
  {
    
    
    path: '/blogs',
    name: 'Blogs',
    component: Blogs
  },
  {
    
    
    path: '/login',
    name: 'Login',
    component: Login
  },
  {
    
    
    path: '/blog/add',
    name: 'BlogEdit',
    component: BlogEdit
  },
  {
    
    
    path: '/blog/:blogId',
    name: 'BlogDetail',
    component: BlogDetail
  },
  {
    
    
    path: '/blog/:blogId/edit',
    name: 'BlogEdit',
    component: BlogEdit
  }
]

const router = new VueRouter({
    
    
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

然后使用命令启动项目 npm run serve


其他页面的也可以试一下是否路由成功，