案例(模拟登陆退出)

• 前置准备

router/index.js设定路由规则

导入Login与Home

import Login from '@/components/MyLogin.vue'
import Home from '@/components/MyHome.vue'      

const router = new VueRouter({
    // 登陆的路由规则
    routes: [
        { path: '/', redirect: '/login' },
        { path: '/login', component: Login },
        // 后台主页的路由规则
        { path: '/home', component: Home }
    ]
})      

• 后台主页基础布局

index.js路由规则

导入页面

import Login from '@/components/MyLogin.vue'
import Home from '@/components/MyHome.vue'      

设定规则

const router = new VueRouter({
    // 登陆的路由规则
    routes: [
        { path: '/', redirect: '/login' },
        { path: '/login', component: Login },
        // 后台主页的路由规则
        {path: '/home',component:Home,}
    ]
})      

• 页面布局

MyHome.vue

导入组件

// 头部区域组件
import MyHeader from "./subcomponents/MyHeader.vue"
// 左侧边栏组件
import MyAside from "./subcomponents/MyAside.vue"      

注册

// 注册组件
  components: {
    MyHeader,
    MyAside,
  },      

template

<template>
  <div class="home-container">
    <!-- 头部区域 -->
    <MyHeader></MyHeader>
    <!-- 页面主题区域 -->
    <div class="home-main-box">
      <!-- 左则边栏 -->
      <MyAside></MyAside>
      <!-- 右侧边栏主体区域 -->
      <div class="home-main-body">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>
​      

css

<style scoped>
.home-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}
  .home-main-box {
    height: 100%;
    display: flex;
  }
   .home-main-box  .home-main-body {
      padding: 15px;
      flex: 1;
}
</style>      

• MyLogin.vue页面

因为没有后台数据，这里模拟账号密码

1. data中定义username和password

data(){
    return{
      username:'',
      password:''
    }
  },      

2.表单双向数据绑定

v-model

//登录
<div class="form-group form-inline">
          <label for="username">登录名称</label>
          <input
            type="text"
            class="form-control ml-2"
            id="username"
            placeholder="请输入登录名称"
            autocomplete="off"
            v-model.trim="username"
          />
        </div>
//密码
 <div class="form-group form-inline">
          <label for="password">登录密码</label>
          <input
            type="password"
            class="form-control ml-2"
            id="password"
            placeholder="请输入登录密码"
            v-model.trim="password"
          />
        </div>      

3.重置按钮

<button type="button" class="btn btn-secondary mr-2" @click="reset">重置</button>      

methods

methods:{
    reset(){
      this.username ='',
      this.password = ''
    },
  }      

4.登录按钮

<button type="button" class="btn btn-primary" @click="login">登录</button>      

设定token值等登陆操作

login(){
      if(this.username == 'admin' && this.password == '123456'){
        localStorage.setItem('token','Bearer xj')
        this.$router.push('/home')
      }else{
        localStorage.removeItem('token')
      }
    }      

• index.js路由页

  1.设定导航守卫

  当登陆后会跳转到home页面，这里做token验证，成功放行，失败则返回login登陆页面

  router.beforeEach(function (to, from, next) {
      if (to.path == '/home') {
          const token = localStorage.getItem('token');
          if (token) {
              next()
          } else {
              next('/login')
          }
      } else {
          next();
      }
  })      

• MyHeader.vue页面

1.退出功能

   <!-- 右侧按钮区域 -->
    <div class="layout-header-right">
      <button type="button" class="btn btn-light" @click="logout">退出登录</button>
    </div>      

清空token值，并跳转至登录页

methods:{
    logout(){
      // 1.清空token
      localStorage.removeItem('token')
      // 2.跳转到登录页
      this.$router.push('/login')
    }
  }      

• 实现子路由嵌套显示

MyAside.vue

<div class="layout-aside-container">
    <!-- 左侧边栏列表 -->
    <ul class="user-select-none menu">
      <li class="menu-item">
        <router-link to="/home/users">用户管理</router-link>
      </li>
      <li class="menu-item">
        <router-link to="/home/rights">权限管理</router-link>
      </li>
      <li class="menu-item">
        <router-link to="/home/goods">商品管理</router-link>
      </li>
      <li class="menu-item">
        <router-link to="/home/orders">订单管理</router-link>
      </li>
      <li class="menu-item">
        <router-link to="/home/settings">系统设置</router-link>
      </li>
    </ul>
  </div>      

MyHome.vue设定路由占位符

右侧边栏主体区域

<template>
  <div class="home-container">
    <!-- 头部区域 -->
    <MyHeader></MyHeader>
    <!-- 页面主题区域 -->
    <div class="home-main-box">
      <!-- 左则边栏 -->
      <MyAside></MyAside>
      <!-- 右侧边栏主体区域 -->
      <div class="home-main-body">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>      

index.js设定右侧边栏子路由规则

{
            path: '/home', 
            component:Home,
            redirect:'/home/users',
            children: [
                { path: 'users', component: Users },
                { path: 'rights', component: Rights },
                { path: 'goods', component: Goods },
                { path: 'order', component: Order },
                { path: 'settings', component: Settings },
     
            ]
        }      

• 循环渲染用户信息

  MyUsers.vue

         <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>
             详情
            </td>
          </tr>      

  • 添加用户点击进入详情页面

    点击事件传参（item.id）

    @click.prevent="gotoDetail(item.id)      

<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="gotoDetail(item.id)">详情</a>
          </td>
        </tr>      

方法中使用拼接id

methods:{
    gotoDetail(id){
      this.$router.push('/home/userinfo/'+id)
    }
  }      

index.js定义路由规则

导入详情页

import UserDetail from '@/components/user/MyUserDetail.vue'      

路由开启props传参

路由规则中试用:id

{
path: '/home', 
component:Home,
redirect:'/home/users',
children: [
{ path:'userinfo/:id',component:UserDetail,props:true},            ]
        }      

MyuserDetail.vue

props接收参数

<template>
  <div>
    <button type="button" class="btn btn-light btn-sm" @click="$router.back()">后退</button>
    <h4 class="text-center">用户详情---{{id}}</h4>
  </div>
</template>
​
<script>
export default {
  name: 'MyUserDetail',
  props:['id']
}
</script>
<style lang="less" scoped></style>      

• 导航守卫添加页面无token拦截

添加pathArr.js 并导出页面

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

router/index.js

import PathArr from '@/router/pathArr.js'      

// 全局前置守卫
router.beforeEach(function (to, from, next) {
    if (PathArr.indexOf(to.path)!==-1) {
        const token = localStorage.getItem('token');
        if (token) {
            next()
        } else {
            next('/login')
        }
    } else {
        next();
    }
})