全部栏目

首页 操作系统 后端开发 数据库 前端开发 移动端开发
您的当前位置：首页正文

Vue(七)：路由

2024-11-23 来源：个人技术集锦

一、前端路由的概念及原理

1.1 什么是路由

路由（router）就是对应关系

1.2 SPA与前端路由

SPA：单页面应用程序

1.3 前端路由的工作方式

 

二、vue-router的基本使用

2.1 什么是vue-router

vue-router是vue.js官方给出的路由解决方案，它只能结合vue项目进行使用，能够轻松地解决SPA项目中组件的切换。

2.2 vue-router的基本用法

2.2.1 vue-router的安装和配置

（1）安装vue-router包：npm i vue-router@3.5.2 -S

（2）创建路由模块。

// src/router/indexedDB.js 当前项目的路由模块
import Vue from 'vue'
import VueRouter from 'vue-router'

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

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

export default router

（3）导入并挂载路由模块

在vue项目中，要想把路由用起来，必须把路由实例对象，通过以下方式进行挂载。此处编辑的是main.js文件

注：import路由模块时，路径可只写到router文件夹，因为默认会加载文件夹下的index.js文件

（4）声明路由链接和占位符

在App.vue中用VueRouter占位。

App.vue中详细代码如下：

<template>
<div class="app-container">
  <h1>App.vue</h1>
  <a href="#/left">左窗口</a>
  <a href="#/right">右窗口</a>
  <hr>
  <!-- 只要在项目中安装和配置了vue-router,就可以使用router-view这个组件了 -->
  <!-- 占位符 -->
<router-view></router-view>
</div>

router-link代替a实现超链接

<template>
<div class="app-container">
  <h1>App.vue</h1>
   <router-link to="/left">左窗口</router-link>
   <router-link to="/right">右窗口</router-link>
  <hr>
  <!-- 只要在项目中安装和配置了vue-router,就可以使用router-view这个组件了 -->
  <!-- 占位符 -->
<router-view></router-view>
</div>
</template>

并在router/index.js中配置Hash值和组件之间的对应关系

总结如下图：

实现效果：点击左窗口链接切换到Left.vue，点击右窗口链接，跳转至Right.vue

2.2.2 redirect路由重定向

2.3 嵌套路由

通过路由实现组件的嵌套展示，叫做嵌套路由。

（2） 在src/router/index.js路由模块中，导入需要的组件，并使用children属性声明子路由规则

 效果如下：点击右窗口链接，进入Right.vue。Right.vue页面点击tab1，进入tab1页面

2.4 默认子路由

如上，点击右窗口时默认不展示Tab组件。若想设置默认子路由，有两种方式：
（1）redirect方式

（2）默认子路由方式：children中设置默认路由的path值为空字符串。（注：此处需同步设置Right.vue中的router-link！！！）

 

2.5 动态路由

2.5.1 动态路由匹配

如2.4节描述点击Tab1按钮，跳转至Tab1页面，点击Tab2按钮，跳转至Tab2页面。可是若Tab页面过多，这样一个一个写过于麻烦，如下：

 

 解决办法：采用动态路由匹配，如下：

”

 此时在App.vue中打印this的值发现。this.$route.params的值就是App.vue传进来的参数值。

2.5.2 为路由规则开启props传参

 （1）无论点击Tab1还是Tab2......页面最终跳转的是Right.vue。在Right.vue中添加自定义属性：props: ['id'],

（2）router/index.js中开启props传参：

 这样，不需要采用this.$route.params获取参数的值，直接通过{{ id }}就可以。

2.6 拓展query和fullPath

 

三、vue-router的常用用法

3.1 声明式导航&编程式导航

导航：页面跳转

声明式导航：在浏览器中，点击链接实现导航的方式，叫做声明式导航，例如：在普通网页中点击<a>链接，vue项目中点击<router-link>都属于声明式导航

编程式导航：在浏览器中，调用API方法实现导航的方式，叫做编程式导航。例如：普通网页中调用location.href跳转到新页面的方式，属于编程式导航

3.2 vue-router中的编程式导航API:push/replace/go/back/forward

vue-router提供了许多编程式导航的API，其中最常用的导航API分别是：

<template>
<div class="app-container">
  <h1>App.vue</h1>
  <button @click="$router.push('/right')">push方法跳转Right页面</button>
  <button @click="$router.replace('/right')">replace方法跳转Right页面</button>
  <router-view></router-view>
</div>
</template>

注：push和replace代替的是router-link。router-view仍然需要！！！

（3）this.$router.go(数值n)。n可以是正数也可以是负数

        浏览历史中前进和后退。this.$router.go(-1)表示后退一层，若后退的层数超过上限，则原地不动

简化：实际开发中，一般只会前进和后退一层页面，因此vue-router提供了两个便捷方法：

$router.back():历史记录中，后退到上一个页面

$router.forward():历史记录中，前进到下一个页面

发现功能实现正常，但控制台有报错：

在router/index.js中Vue.use(VueRouter)后添加如下代码后问题解决：

const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location) {
  return originalPush.call(this, location).catch(err => err)
}

3.3 导航守卫

导航守卫可以控制路由的访问权限，如只有登录成功才能访问某些页面，示意图如下：

3.3.1 全局前置守卫

每次发生路由的导航跳转时，都会触发全局前置守卫。因此，在全局前置守卫中，程序员可以对每个路由进行访问权限的控制。前置的意思是在页面跳转前即触发。

3.3.2 守卫方法的三个形参

全局前置守卫的回调函数接收3个形参(to,from,next)，格式为：

 控制台打印出的to，包含params、path、fullPath等参数，格式如下：

3.3.3 next函数的三种调用方式

（1）当前用户拥有后台主页的访问权限，直接放行：next()

（2）当前用户没有后台主页的访问权限，强制其跳转至登录页面：next('/login')

（3）当前用户没有后台主页的访问权限，不允许跳转至后台主页，停留在当前页面：next(false)

3.3.4 控制后台主页的访问权限 

如下，main页面设置访问权限，只有登录后才能访问。先判断是否要访问main页面，若不是，则直接放行。若是，判断用户是否登录。若登录，跳转至Main。若未登录，则跳转至登录页面。以下代码均写在router/index.js中：

四、后台管理案例

案例效果：

如上，首先是登录页面MyLogin.vue.涉及的是token的记录。并将路由添加至index.js

注：如下代码仅限于功能实现，页面未能实现如上界面：

<template>
  <div class="login-container">
    <div class="login-box">
      <div class="avatar-box">
        <img src="@/assets/logo.png" class="img-avatar" alt="">
      </div>
      <div class="form-login">
    <form action="#">
      <label for="username">登录名称：</label>
      <input type="text" name="username" id="username" placeholder="请输入登录名称" v-model.trim="username"><br>
      <label for="username">登录密码：</label>
      <input type="password" name="password" id="password" placeholder="请输入登录密码" v-model.trim="password"><br>
      <button type="button" class="btn1" @click="reset">重置</button>
      <button type="button" class="btn1" @click="login">登录</button>
    </form>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    reset () {
      this.username = ''
      this.password = ''
    },
    login () {
      if (this.username === 'admin' && this.password === '666666') {
        localStorage.setItem('token', 'Bearer xxx')
        this.$router.push('/home')
      } else {
        localStorage.removeItem('token')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.login-container {
  background-color: #35495e;;
  height: 100%;
  label {
    color: azure;
  }
}
</style>

index.js文件如下：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '@/components/MyLogin.vue'
import Home from '@/components/user/Myhome.vue'
import Users from '@/components/menus/MyUsers.vue'
import Rights from '@/components/menus/MyRights.vue'
import UserInfo from '@/components/user/MyUseInfo.vue'
import Arr from '@/router/pathArr.js'

Vue.use(VueRouter)
const router = new VueRouter({
  routes: [
    { path: '/', redirect: '/login' },
    { path: '/login', component: Login },
    {
      path: '/home',
      component: Home,
      redirect: '/home/users',
      children: [
        { path: 'users', component: Users },
        { path: 'rights', component: Rights },
        { path: 'userInfo/:id', component: UserInfo, props: true }
      ]
    }
  ]
})

router.beforeEach(function (to, from, next) {
  if (Arr.indexOf(to.path) !== -1) {
    const token = localStorage.getItem('token')
    if (token) {
      next()
    } else {
      next('/login')
    }
  } else {
    next()
  }
})
export default router

 如上，index.js中加入了导航守卫，设置某些页面在未登录前不能访问。将只有登录后才能访问的路径新建了一个pathArr.js文件，index.js文件引入即可使用。pathArr.js代码如下：

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

index.js中分为引用和使用两步，如下：

import Arr from '@/router/pathArr.js'
router.beforeEach(function (to, from, next) {
  if (Arr.indexOf(to.path) !== -1) {
    const token = localStorage.getItem('token')
    if (token) {
      next()
    } else {
      next('/login')
    }
  } else {
    next()
  }
})

主页面-----MyHome.vue：

<template>
<div class="home-container">
<div class="header-box">
  <Header></Header>
</div>
<div class="home-main-box">
    <Aside></Aside>
  <div class="home-main-body">
  <Body></Body>
  </div>

</div>
</div>
</template>

<script>
import Header from '@/components/subcomponents/MyHeader.vue'
import Body from '@/components/subcomponents/Mybody.vue'
import Aside from '@/components/subcomponents/MyAside.vue'
export default {
  components: {
    Header,
    Body,
    Aside
  }

}
</script>

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

}
</style>

主页面包括Header组件、Aside组件和Body组件

MyHeader.vue代码如下：

<template>
  <div class="header-container">
    <div class="left-body">
    <img src="@/assets/logo.png" alt="">
    <h4>测试***系统</h4>
    </div>
    <div class="right-body">
      <button type="button" class="btn btn-light" @click="logout">退出登录</button>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    logout () {
      localStorage.removeItem('token')
      this.$router.push('/login')
    }
  }
}
</script>

<style>

</style>

MyBody.vue代码如下:

<template>
  <div class="body-container">
    <!-- <p>body</p> -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

MyAside.vue代码如下：

<template>
  <div class="aside-container">
    <ul class="select-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>
</template>

<script>
export default {

}
</script>

<style>

</style>

点击详情跳转至每一个用户的详细信息页，此处采用的是动态路由匹配。MyUserInfo.vue代码如下：

<template>
  <div>
    <p>用户详情</p>
    <h2>{{ this.$route.params.id}}</h2>
    <h1>{{ id }}</h1>
  </div>
</template>

<script>
export default {
  props: ['id']
}
</script>

<style>

</style>

动态路由匹配可采用两种方式：

方式一：this.$route.params

（1）MyUser.vue中定义页面跳转时的参数传递

（2） index.js中设置id

 （3）MyUserInfo.vue中接收

 方式二：props参数

（1）MyUser.vue中定义页面跳转时的参数传递

（2）index.js中设置props参数为true

 （3）MyUserInfo.vue中接收
显示全文