=============
前端_页面路由
=============
1 删除导航连接并修改全局样式
/src/App.vue:
2 添加登录页面
/src/views/Login.vue:
登录页面
3 添加列表页面
/src/views/List.vue:
列表页面
4 添加详情页面
/src/views/Detail.vue:
详情页面
5 添加编辑页面
/src/views/Edit.vue:
编辑页面
6 添加页面路由
/src/router/index.js:
...
import Login from '../views/Login.vue'
import List from '../views/List.vue'
import Detail from '../views/Detail.vue'
import Edit from '../views/Edit.vue'
...
const routes = [
{
path: '/login',
name: 'Login',
component: Login
},
{
path: '/list',
name: 'List',
component: List
},
{
path: '/detail/:id',
name: 'Detail',
component: Detail
},
{
path: '/edit/:id',
name: 'Edit',
component: Edit
},
{
path: '/',
name: 'Index',
redirect: {name: "List"}
},
{
path: '/new',
name: 'New',
component: Edit
}
]
...
7 运行测试
http://localhost:8080/login
登录页面
http://localhost:8080/list
列表页面
http://localhost:8080/detail/1
详情页面
http://localhost:8080/edit/1
编辑页面
http://localhost:8080
列表页面
http://localhost:8080/new
编辑页面