后台案例学习路由

1.安装和配置路由

- 1.npm i 安装包
- 2.npm i vue-router@3.5.2 -S
- 3.在 src 源代码目录下，新建 router/index.js 路由模块，并初始化如下的代码：

//1、导入Vue和VueRouter的包
import Vue from 'vue'
import VueRouter from 'vue-router'
 
//2、调用Vue.use函数，把VueRouter安装为Vue的插件
Vue.use(VueRouter)
 
//3、创建路由的实例对象
const router = new VueRouter()
 
//4、向外共享路由的实例对象
export default router

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

// 在进行模块化导入的时候，如果给定的是文件夹，则默认导入这个文件夹下，名字叫做 index.js 的文件
import router from '@/router'
...
new Vue({
  render: h => h(App),
//2、挂载路由模块
  // 在 Vue 项目中，要想把路由用起来，必须把路由实例对象，通过下面的方式进行挂载
  // router: 路由的实例对象
//router: router 属性名和属性值一样可以简写
  router
}).$mount('#app')

2.基于路由渲染登陆组件

1.在router/index.js里面定义路由规则
import Login from '@/components/MyLogin.vue'

const router = new VueRouter({
  routes: [
    { path: '/', redirect: '/login' },
    { path: '/login', component: Login }
  
  ]
})

1.在App.vue里面占位
2.把div去掉，router-view看成根节点

 <router-view></router-view>
  

页面展示：

3.模拟登录功能

实现原理 默认访问的是’/‘，一进来走路由匹配，重定向为’/login’，跳转到登录页，展示登录组件，登陆组件放到占位符中，则登陆组件自动被渲染到页面上了。

//MyLogin.vue
export default {
  name: 'MyLogin',
  data() {
    return {
      username: '',
      passward: ''
    }
  },
  methods: {
    reset() {
      this.username = ''
      this.passward = ''
    },
    login() {
      if (this.username === 'admin' && this.passward === '123') {
        // 1.存储token
        localStorage.setItem('token', 'Bearer xxxx')
        // 2.跳转到登录页面
        this.$router.push('/home')
      } else {
        // 登陆失败
        localStorage.removeItem('token')
      }
    }
  }
}

this.$router.push(‘hash 地址’) 跳转到指定 hash 地址，并增加一条历史记录

4.说明Token认证时token的格式

又要用到大事件项目
bearer翻译过来是持票人的意思，所以bearer token可以形象地理解为临时的入场票据

5.实现后台主页的基本布局

index.js配置路由规则

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

7.实现子路由的嵌套展示

点击侧边栏展示出对应的组件------嵌套路由

MyAside.vue

 <!-- 左侧边栏列表 -->
    <ul class="user-select-none menu">
      <li class="menu-item"><router-link to="/home/user">用户管理</router-link></li>
      <li class="menu-item"><router-link to="/home/right">权限管理</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/setting">系统设置</router-link></li>
    </ul>

MyHome.vue

8.点击进入用户详情页

路由规则是平级的，因为它在一个页面展示，所以规则平级

prevent阻止默认行为，阻止a链接跳转

<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="goDetails">操作</a>
          </td>
        </tr>
      </tbody>

9.升级用户详情页的路由规则

只挑地址还不行，还要传递参数所以加上id

vue中$router和$route的区别

1.$router是VueRouter的实例方法,可以认为是全局的路由对象，包含了所有路由的对象和属性。
2.$route是一个跳转的路由对象，每一个路由都会有一个$route对象，是一个局部的对象，可以获取对应的name，path，params，query等

访问参数的两种方式

//方法一 $route.params 参数对象
  <h4 class="text-center">用户详情---{{ $route.params.id }}</h4>

//方法二 使用 props 接收路由参数
 <h4 class="text-center">用户详情---{{ id }}</h4>

---------------------------
export default {
  name: 'MyUserDetail',
  // 使用prop接收路由规则匹配到的参数项
  props:['id']
}
---------------------------
   // 用户详情页的路由规则 冒号只能放在路由规则里
{ path: 'userInfo/:id', component: MyUserDetails,props:true }

10.路由path的配置项

注意：hash地址几乎都是小写的

11.扩展如何控制页面的权限

可以单独配置一个文件pathArr.js,将要访问的地址放入其中

index.js

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


router.beforeEach((to, from, next) => {
  // if (to.path === '/home') {
  // indexOf的作用
// 在数组里面查找，如果这个数在这个数组里面，那么结果为0，如果不在那么结果为-1
 //  pathArr.indexOf(to.path) !== -1 这句话的意思是他的to.path在这个数组里面
  // 接下来执行下一步，如果等于-1，那么就说明不在里面，就不执行如下代码
  if (pathArr.indexOf(to.path) !== -1) {
    const token = localStorage.getItem('token')
    if (token) {
      next()
    } else {
      next('/login')
    }
  } else {
    next()
  }
})

END