一个vue2的小案例--后台管理系统来复习路由模块的部分知识点

我先在b站上跟着视频学着做了一遍后，在自己按照步骤和需求自己复习一遍，做笔记记录一下。

一.案例效果

二.复习到的知识点

• 命名路由
• 路由重定向
• 导航守卫
• 嵌套路由
• 动态路由匹配
• 编程式导航

三.具体步骤

1. 路由模块

1.1在项目中安装 vue-router

在vue2 的项目中，安装vue-router 的命令如下：

npm i  vue-router@3.5.2 -S

1.2 创建路由模块

在 src 源代码目录下，新建 router/index.js 路由模块，并初始化如下的代码：

import Vue from 'vue'
import VueRouter from 'vue-router'

// 把 VueRouter 安装为Vue的插件
Vue.use(VueRouter)

// 创建路由的实例对象
const router = new VueRouter()

// 向外共享路由的实例对象
export default router

1.3 导入并挂载路由模块

在 src/main.js 入口文件中，导入并挂载路由模块。

1.4 声明占位符

在 App.vue 中声明占位符。

1.5 声明路由的基本的匹配规则（之后还要增加）

需求是：

1. 当访问’/login’时出现Login组件即登录页面。
2. 并且当只是访问’/'也需要出现登录页面，这需要用到重定向。

至此，基于路由渲染出来了登录组件。

2. 模拟登录功能

2.1 实现重置功能

以下代码在MyLogin.vue 中更改.

2.2 实现登录功能

如果用户名和密码正确，则存储token并跳转到后台主页，否则登录失败，移除存在的token。在这个案例中，把数据写死，能登陆成功的只有用户名为admin且密码为123456，其他一律无法通过。

给登录按钮也添加点击事件，并且在methods节点中加入login方法。

 methods: {
    reset() {
      this.username = '',
      this.password = ''
    },
    login() {
      if (this.username === 'admin' && this.password === '123456') {// 登陆成功
      // 1.存储token 
        localStorage.setItem('token','Barer xxx')
      // 2. 跳转到后台主页
        this.$router.push('/home')
      } else {
        // 登录失败
        localStorage.removeItem('token')
      }
    }
  }

3. 实现后台主页的基础布局

后台主页的组件是MyHome.vue。

ps：导入组件以及注册组件省略，不截图。

4. 退出登录并控制访问权限

4.1 退出登录

1. 删除token，并且回到登录页面。
2. 退出登录按钮 在MyHeader组件中

同理，给退出登录按钮绑定点击事件，并且定义logout函数。

methods: {
    // 退出登录
    logout() {
      // 删除token
      localStorage.removeItem('token')
      // 跳转到登录页面
      this.$router.push('/login')
    }
  }

4.2 控制访问权限

如果用户没有登录，就没有token，那么在地址栏中输入’/home’或者 ‘/home/user’等等以’/home’开头的网址都无效，不能放行

需要用到路由全局守卫。则每次发生路由的导航跳转时，都会触发全局前置守卫。在全局前置守卫中，程序员可以对每个路由进行访问权限的控制

router.beforeEach((to,from,next)=> {
  if (to.path.substring(0,5) === '/home') {
    // 如果想进入后台主页
    const token = localStorage.getItem('token')
    if (token) {
      // 如果有token，则放行
      next()
    } else {
      // 否则还是在登录页面
      next('/login')
    }
  } else {
    // 不前往后台主页，放行
    next()
  }
})

关于判断地址栏的输入网址，还有更好的方法，不需要像这样比较木讷，可以将所有的不允许用户还没登陆就访问的path封装起来，导入之后，再进行查询，如下：

path.js:

export default ['/home','/home/users','/home/rights','/home/goods','/home/settings']

router/index.js:

5. 实现子路由

需要用到 child 属性。

6. 渲染用户管理页面的用户列表，并且传递id

在这个案例中，数据是写死的已经给好的，只需渲染即可。

 <tbody>
        <tr v-for="item in userlist" :key="item.id">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.age}}</td>
          <td>{{item.position}}</td>
          <td><a href="#" @click.prevent="getDeatil(item.id)">详情</a></td>
        </tr>
      </tbody>

7. 关于用户详情页

7.1 配置路由

MyUser.vue 中的部分代码：

配置路由：

7.2 点击回退返回上一页

MyUserDetail.vue 中：

7.3 获取id的另一种更简单的方式

MyUserDetail.vue :