vue-cli@4 入门（三）

路由

在项目下，创建 vue文件。我们需要类似 localhost:8080/login 这种方式访问。这个时候就需要配置路由信息了。

如：

project
- router
  - index.js (这里配置路由信息)
- src
  - views (这里是页面)
    - About.vue
    - Home.vue
    - Login.vue
    - Manage.vue

在 router 的 index.js中配置路由信息：

里面有个 children: ，一般后台管理首页，左边是一个菜单栏，如下：

首页
- 账号管理
- 推送管理
- 员工管理
- 业务管理

这里的每一个router，都写在首页的 children里面就可以了。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34


const Login = () => import(/* webpackChunkName: "login" */ '../views/Login.vue')
const Manage = () => import(/* webpackChunkName: "login" */ '../views/Manage.vue')
const Home = () => import(/* webpackChunkName: "login" */ '../views/Home.vue')
const About = () => import(/* webpackChunkName: "login" */ '../views/About.vue')

const routes = [
  {
    path: '/',
    name: 'Login',
    component: Login
  },
  {
    path: '/',
    name: 'Manage',
    component: Manage,
    children: [{
      path: '/home' ,
      name: '首页',
      component: Home,
    },{
      path: '/about' ,
      name: '关于',
      component: About,
    }]
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]