奔三路 - 你30岁前的学习路!

奔三路学习网

当前位置: 主页 > vue面试通 > 开源框架 >

vue-navigation一个原生路由插件

时间:2018-04-05 21:12来源: 作者:史密斯
导航默认行为类似手机APP的页面导航(A、B、C为页面): A前进到B,再前进到C; C返回到B时,B会从缓存中恢复
github:https://github.com/zack24q/vue-navigation

需要 vue 2.x 与 vue-router 2.x

导航默认行为类似手机APP的页面导航(A、B、C为页面):

  1. A前进到B,再前进到C;
  2. C返回到B时,B会从缓存中恢复
  3. B再次前进到C,C会重新生成,不会从缓存中恢复
  4. C前进到A,A会生成,现在路由中包含2个A实例

!重要:vue-navigation在url中添加了一个key来区分路由。key的名称默认为VNK,可以修改。

在线演示

演示地址

代码地址

安装

npm i -S vue-navigation

yarn add vue-navigation

使用

基础使用

main.js

import Vue from 'vue'
import router from './router' // vue-router 实例
import Navigation from 'vue-navigation'

Vue.use(Navigation, {router})
// 启动你的应用...

App.vue

<template>
  <navigation>
    <router-view></router-view>
  </navigation>
</template>

搭配vuex2使用

main.js

import Vue from 'vue'
import router from './router' // vue-router 实例
import store from './store' // vuex store 实例
import Navigation from 'vue-navigation'

Vue.use(Navigation, {router, store})
// 启动你的应用...

传入 store 后,vue-navigation 会向 store 注册一个Module(Module的默认名称为 navigation),同时在页面跳转时会提交 navigation/FORWARD 或 navigation/BACK 或 navigation/REFRESH

Options

只有route是必须的.

Vue.use(Navigation, {router, store, moduleName: 'navigation', keyName: 'VNK'})

事件

方法: [ on | once | off ]

事件类型: [ forward | back | replace | refresh | reset ]

参数( to | from ) 的属性:

  • name
    • 类型: string
    • 描述: 路由的名称(包含key)
  • route
    • 类型: object
    • 描述: vue-route的路由信息对象
this.$navigation.on('forward', (to, from) => {})
this.$navigation.once('back', (to, from) => {})
this.$navigation.on('replace', (to, from) => {})
this.$navigation.off('refresh', (to, from) => {})
this.$navigation.on('reset', () => {})

方法

在全局环境中使用 Vue.navigation 或在Vue实例中使用 this.$navigation

  • getRoutes() 获取路由记录
  • cleanRoutes() 清空路由记录

(责任编辑:admin)
顶一下
(0)
0%
踩一下
(1)
100%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
发布者资料
史密斯 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2017-11-24 11:11 最后登录:2018-07-15 11:07

关注奔三路小程序,方便你我他