路由

仿vue-router的API,实现一套简化版的路由模块。可支持传统的hash路由, 以及新的history路由。

注意: 由于web components的局限性, 不支持嵌套路由。


import { createRouter, createWebHistory } from 'wkitd'

const router = createRouter({
  history: createWebHistory(), // 默认createWebHashHistory
  routes: [
    {
      path: '/',
      name: 'wc-home' // 必须为页面组件的标签名
    },
    {
      path: '/about',
      name: 'wc-about',
      component: () => import('./views/about.js')
    }
  ]
})

路由模块5大方法

1. createRouter()

这是创建路由中间件的方法, 传入一个包含history和routes的对象。

2. createWebHashHistory()

创建hash路由, 传入createRouter的参数之一。

3. createWebHistory()

创建history路由, 传入createRouter的参数之一。

4. getRouter()

这是用来获取当前的路由实例的方法, 通常情况下不需要用到这个方法, 基于wkit开发的组件, 可直接在内部通过this.$router获取。这个方法, 是给其他不是基于wkit的组件用的。

5. getCurrentPage()

这是用来获取当前页面的路由信息的方法, 跟上面的方法一样, 只在非wkit组件才需要用。wkit组件内部可通过this.$router.route获取。

路由实例属性 & 方法

.route

只读属性, 为当前页面的路由信息。

.addRoute()

一般来说, 路由页面, 在创建路由的时候已经添加好了, 在有必要的时候, 可调用这个方法追加路由页面。


$router.addRoute({
  path: '/foo',
  name: 'wc-foo'
})

.go(delta)

同原生的history.go(), 可通过传参实现向前/向后跳转多少个页面。


$router.go(1) // 前进一个页面(如果有的话)
$router.go(-1) // 后退一个页面(如果有的话)

.back()

等价于 .go(-1)

.forward()

等价于 .go(1)

.push(path)

新页面跳转, path可以一字符串格式, 也可以是对象。



$router.push('/foo/bar')
$router.push('/foo/bar?goo=123')

$router.push({
  path: '/foo/bar'
})

$router.push({
  path: '/foo/bar',
  query: { goo: 123 }
})

.replace(path)

与.push()方法一样, 都是新页面跳转, 区别是, replace()跳转会替换当前路由。

.beforeEach(callback`<Function>`)

路由守卫方法。可以在每个路由跳转之前, 做一些额外的逻辑。不满足逻辑时, 可选择阻止页面跳转。


import { createRouter, createWebHistory } from 'wkitd'

const router = createRouter({
  history: createWebHistory(), // 默认createWebHashHistory
  routes: [
    {
      path: '/',
      name: 'wc-home' // 必须为页面组件的标签名
    },
    {
      path: '/about',
      name: 'wc-about',
      component: () => import('./views/about.js')
    }
  ]
})


router.beforeEach(function (prev, next, done) {
  
  // console.log(prev, next)
  // prev 即为上一页的路由信息
  // next 为下一页的路由信息
  // 这里可以做任意逻辑处理, 完成执行 done() 即可
  done()
})