yutent edited this page
路由
仿
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()
})
路由规则
1. 静态路径
即, 该路由是精确匹配, 一一对应的, 如 /foo
, /foo/bar
等
2. 动态路径
即该路径可能是一组相同规律的格式, 如 /foo/:id
, /bar/:name
等。
注意
, 暂时只支持2层路由, 即 /foo/bar/:id
这种是不合法的, 未来是否支持, 以更新日志为准。
3. 兼容的动态路径
其实是规则1和2的结合, 即希望/foo
和/foo/:id
, 都能匹配上, 此时只需要在规则后面加一个?
即可。
如 /foo/:id?
。