返回

利用Uniapp+TS封装路由，掌控路由跳转并使用拦截器

前端







## 前言

在Uniapp中，路由就是一个组件或页面的路径。每次跳转都需要调用官方提供的方法，使用起来不方便，而且无法统一实现某些功能。本次封装将为你带来以下功能：

1. 添加路由白名单。
2. 限制某些页面的访问。

## 封装过程

### 1. 创建一个名为`router.ts`的文件

```typescript
// router.ts
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: () => import('@/pages/home.vue')
  },
  {
    path: '/about',
    component: () => import('@/pages/about.vue')
  },
  {
    path: '/login',
    component: () => import('@/pages/login.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

2. 在main.js中注册路由

// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

3. 使用路由

// 组件中
import { useRouter } from 'vue-router'

export default {
  setup() {
    const router = useRouter()

    return {
      router
    }
  },
  methods: {
    goToHome() {
      router.push('/')
    },
    goToAbout() {
      router.push('/about')
    },
    goToLogin() {
      router.push('/login')
    }
  }
}

4. 添加路由白名单

// router.ts
const router = new VueRouter({
  routes,
  // 添加白名单
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: 0 }
    }
  }
})

5. 限制某些页面的访问

// router.ts
const router = new VueRouter({
  routes,
  // 限制某些页面的访问
  beforeEach (to, from, next) {
    if (to.path === '/login') {
      next()
    } else {
      if (localStorage.getItem('token')) {
        next()
      } else {
        next('/login')
      }
    }
  }
})

总结

通过这种方式，你可以轻松管理路由并实现白名单和访问限制等功能。这将使你的Uniapp项目更加安全和易于使用。

附加信息

1. 路由白名单

路由白名单是指那些不需要进行访问限制的路由。你可以将这些路由添加到白名单中，以便它们可以被任何人访问。

2. 访问限制

访问限制是指对某些路由进行限制，只有满足一定条件的用户才能访问这些路由。你可以使用beforeEach钩子来实现访问限制。

3. 其他功能

除了白名单和访问限制之外，你还可以使用封装后的路由来实现其他功能，例如：

  • 路由守卫
  • 路由元信息
  • 路由过渡动画

4. 参考文档