Vue路由

一、路由的定义

Vue路由是指在使用Vue.js框架构建的单页面应用程序(SPA)中,管理和控制页面视图切换的一种机制。它是Vue.js生态系统中的一个重要组成部分,通过Vue Router这个官方的路由管理器来实现。Vue路由允许开发者定义多个路由规则,每个路由规则都对应一个组件,当用户访问特定的URL时,Vue Router会根据这些规则动态地将对应的组件渲染到视图中,从而实现无刷新的页面跳转和数据更新。

具体来说,Vue路由的定义可以如下:

Vue路由是Vue Router提供的一种用于单页面应用程序的路径到组件的映射系统。它允许开发者为不同的路径定义对应的组件,并在用户导航到这些路径时,自动加载和渲染相应的组件。Vue路由通过维护一个路由视图历史记录,支持前进、后退等导航操作,同时还提供了路由守卫等高级功能,以实现细粒度的路由控制和安全检查。

二、vue-router 使用

1,安装 Vue Router

cs 复制代码
npm install vue-router
# 或者
yarn add vue-router

2,创建路由实例导入 Vue

javascript 复制代码
//创建路由器对象,以及管理路由器配置
//引入一个函数
import {createRouter,createWebHistory,createWebHashHistory} from "vue-router";

3,定义路由

定义一些路由组件,然后创建路由配置数组,每个路由映射一个组件

javascript 复制代码
const routes = [
    {
        path:"/about",
        component :()=>import("@/views/About.vue"),
        name:"about",
    }
]

4,创建路由器实例并传递routes

javascript 复制代码
//创建路由器对象
const router= createRouter({
    history:createWebHistory(process.env.BASE_URL),
    routes:routes,
    linkActiveClass:'active',
})

5,创建和挂载根实例

javascript 复制代码
createApp(App).use(router).mount('#app')

6,在Vue组件中使用<router-view/><router-link/>

在你的应用组件(通常是App.vue)中使用<router-view/>作为路由组件的出口,使用<router-link/>作为导航链接。

html 复制代码
<router-link to="/about">about</router-link>

  <router-view></router-view>

三、基本路由配置

一个基本的路由配置包含pathcomponent属性,分别代表路由的路径和要渲染的组件。

javascript 复制代码
import Vue from 'vue'
import Router from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home', // 可选,给路由命名
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

嵌套路由

嵌套路由用于在父组件内部渲染子组件。

javascript 复制代码
{
  path: '/parent',
  component: Parent,
  children: [
    {
      path: 'child',
      component: Child
    }
  ]
}

路由重定向

路由重定向可以通过redirect属性实现。

javascript 复制代码
{
  path: '/home',
  redirect: '/'
}

路由别名

别名可以给同一个组件定义多个路径。

javascript 复制代码
{
  path: '/about',
  component: About,
  alias: '/info'
}

四、路由守卫

在Vue.js中,路由守卫(Route Guards)是用来通过路由系统的钩子函数来控制导航流程的一种机制。它们可以在路由发生变化时执行一些代码,比如身份验证、权限检查、页面访问统计等。

全局守卫

全局守卫会影响所有路由的变化。

1,beforeEach: 在路由跳转前被调用,接收三个参数:to(即将进入的目标路由对象)、from(当前导航正要离开的路由对象)、next(一个函数,用于解析这个钩子)。

javascript 复制代码
const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
  // 必须调用 next() 方法来解析钩子
  next()
})

2,beforeResolve: 在所有组件内守卫和异步路由组件被解析之后,导航被确认之前被调用。

javascript 复制代码
router.beforeResolve((to, from, next) => {
  // ...
  next()
})

3,afterEach: 在路由跳转后被调用,它没有 next 函数,也不会改变导航本身。

javascript 复制代码
router.afterEach((to, from) => {
  // ...
})

路由独享的守卫

可以在路由配置上直接定义beforeEnter守卫。

javascript 复制代码
const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
        next()
      }
    }
  ]
})

组件内的守卫

可以在组件内部定义以下守卫:

1,beforeRouteEnter: 在路由进入该组件的对应路由之前被调用,不能访问组件实例this,因为守卫执行前组件实例还没被创建。

javascript 复制代码
beforeRouteEnter (to, from, next) {
  // 不能访问 `this`
  next(vm => {
    // 通过 `vm` 访问组件实例
  })
}

2,beforeRouteUpdate: 在当前路由改变,但是该组件被复用时调用。

javascript 复制代码
beforeRouteUpdate (to, from, next) {
  // 可以访问组件实例 `this`
  next()
}

3,beforeRouteLeave: 在导航离开该组件的对应路由时被调用。

javascript 复制代码
beforeRouteLeave (to, from, next) {
  // 可以访问组件实例 `this`
  const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
  if (answer) {
    next()
  } else {
    next(false)
  }
}

在使用路由守卫时,请确保调用next()方法,否则路由导航会被阻塞。如果调用next(false),则取消当前的导航;如果调用next('/')或者next({ path: '/' }),则导航到不同的位置。在beforeRouteEnter守卫中,next可以接收一个回调函数,这个回调函数会在路由解析完成并且组件实例被创建之后执行。

相关推荐
摸鱼仙人~30 分钟前
styled-components:现代React样式解决方案
前端·react.js·前端框架
sasaraku.1 小时前
serviceWorker缓存资源
前端
RadiumAg2 小时前
记一道有趣的面试题
前端·javascript
yangzhi_emo2 小时前
ES6笔记2
开发语言·前端·javascript
yanlele2 小时前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
中微子4 小时前
React状态管理最佳实践
前端
烛阴4 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子4 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端
Hexene...4 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
初遇你时动了情4 小时前
腾讯地图 vue3 使用 封装 地图组件
javascript·vue.js·腾讯地图