Vue-navigation
需要 vue
2.x
与 vue-router2.x
。
导航默认行为类似手机APP的页面导航(A、B、C为页面):
- A前进到B,再前进到C;
- C返回到B时,B会从缓存中恢复;
- B再次前进到C,C会重新生成,不会从缓存中恢复;
- C前进到A,A会生成,现在路由中包含2个A实例。
!重要:vue-navigation在url中添加了一个key来区分路由。key的名称默认为VNK,可以修改。
安装
npm i -S 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()
清空路由记录
- index.js如下:
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
// mode: 'history',
routes: [
{
path: '/',
// name: 'Inedx',
component: resolve => require(['@/pages/index'], resolve),
children: [
{
path: '/',
// name: 'Main',
component: resolve => require(['@/pages/main/index'], resolve),
children: [{
path: '/',
name: 'Home',
component: resolve => require(['@/pages/main/home'], resolve)
},
{
path: '/booking',
name: 'Booking',
component: resolve => require(['@/pages/main/booking'], resolve),
children: [{
path: '/booking',
name: 'ticketsResult',
component: resolve => require(['@/pages/main/booking/ticketsResult'], resolve)
},
{
path: '/booking/ticketsBooking',
name: 'ticketsBooking',
meta: { keepAlive: true },//缓存 fgj
component: resolve => require(['@/pages/main/booking/ticketsBooking'], resolve)
},
{
path: '/booking/orderPay',
name: 'orderPay',
meta: { keepAlive: false },
component: resolve => require(['@/pages/main/booking/orderPay'], resolve)
},
{
path: '/booking/confirmPayment',
name: 'confirmPayment',
meta: { keepAlive: false },
component: resolve => require(['@/pages/main/booking/confirmPayment'], resolve)
}]
},
{
path: '/consult',
name: 'Consult',
component: resolve => require(['@/pages/main/consult'], resolve)
},
{
path: '/center',
name: 'Center',
component: resolve => require(['@/pages/main/center'], resolve)
}, {
path: '/server',
name: 'Server',
component: resolve => require(['@/pages/main/server'], resolve)
},
{
path: '/login',
name: 'Login',
component: resolve => require(['@/pages/login/login'], resolve)
},
{
path: '/rigister_verifyMobile',
name: 'Rigister_verifyMobile',
component: resolve => require(['@/pages/login/rigister_verifyMobile'], resolve)
},
{
path: '/rigister_setPsw',
name: 'Rigister_setPsw',
component: resolve => require(['@/pages/login/rigister_setPsw'], resolve)
},
{
path: '/rigister_success',
name: 'Rigister_success',
component: resolve => require(['@/pages/login/rigister_success'], resolve)
},
{
path: '/forgetPsw_verifyMobile',
name: 'ForgetPsw_verifyMobile',
component: resolve => require(['@/pages/login/forgetPsw_verifyMobile'], resolve)
},{
path: '/error',
name: 'error',
component: resolve => require(['@/pages/main/error'], resolve)
},
{
path: '/paxNotice',
name: 'paxNotice',
component: resolve => require(['@/pages/notes/paxNotice'], resolve)
},
{
path: '/termsService',
name: 'termsService',
component: resolve => require(['@/pages/notes/termsService'], resolve)
}]
}
]
}
]
})
//ticketsBooking.vue
watch: {
passInfo: function(passInfo) {
this.passBunkInfo = passInfo;
},
$route: function(to, from) {
console.log(to, from);
//to里面显示
//meta:{keepAlive: true}
//name:"ticketsBooking"
// if (from.name == "ticketsResult") {
// }
}
},