Skip to content

在小程序中使用的vue-router,无缝对接原生小程序

License

Notifications You must be signed in to change notification settings

TT1228/wx-vue-router

 
 

Repository files navigation

vue-router-mp

npm bundle size npm downloads license

github travis

vue-router-mp 是在 mpvue 中使用的兼容 vue-router 的路由管理器,兼容常用大部分 vue-router 的 API。

支持的特性有:

  • 编程式的导航
  • 命名路由
  • 导航守卫
  • 路由元信息

请阅读 完整文档

安装

NPM

npm install vue-router-mp --save

直接下载

下载源码 并复制到你的工程。

小程序中引入

import Vue from 'vue'
import VueRouter from 'vue-router-mp'

// 或

const Vue = require('vue')
const VueRouter = require('vue-router-mp')

Vue.use(VueRouter)

起步

由于在小程序中,页面路径是由工程源码的目录结构决定,因此相比 vue-router,不需要再指定路径的组件。

// 1. 定义路由
// 此处由于小程序页面路径与源码一一对应,故无需配置组件
const routes = [
  { path: '/pages/foo' },
  {
    name: 'bar', // 命名路由
    path: '/pages/bar',
    isTab: true // 标记当前路由是一个 Tab
  }
]

// 2. 创建 router 实例,然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
  routes // (缩写) 相当于 routes: routes
})

// 现在,应用已经启动了!

通过注入路由器,我们可以在任何组件内通过 this.$router 访问路由器,也可以通过 this.$route 访问当前路由:

export default {
  methods: {
    goBack () {
      window.history.length > 1
        ? this.$router.go(-1)
        : this.$router.push('/pages/foo')
    }
  }
}

请阅读 完整文档

About

在小程序中使用的vue-router,无缝对接原生小程序

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%