我们在views文件夹下定义几个页面:
BlogDetail.vue(博客详情页)
BlogEdit.vue(编辑博客)
Blogs.vue(博客列表)
Login.vue(登录页面)
配置路由:
import Vue from ‘vue‘
import VueRouter from ‘vue-router‘
import Login from ‘../views/Login.vue‘
import Blogs from ‘../views/Blogs.vue‘
import BlogEdit from ‘../views/BlogEdit.vue‘
import BlogDetail from ‘../views/BlogDetail.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: ‘BlogAdd‘,
component: BlogEdit,
meta: {
requireAuth: true
}
},
{
path: ‘/blog/:blogId‘,
name: ‘BlogDetail‘,
component: BlogDetail
},
{
path: ‘/blog/:blogId/edit‘,
name: ‘BlogEdit‘,
component: BlogEdit,
meta: {
requireAuth: true
}
}
]
const router = new VueRouter({
routes
})
export default router