uni-simple-router的使用

一、安装NPM依赖

uni-simple-router提供了基于NPM的链接，通过NPM安装，可以确保与最新款同步，同样你还可以指定版本或者tag

// 项目根目录执行命令行
npm install uni-simple-router

截图展示

二、初始化

自动读取路由表构建路由

// 根据pages.json总的页面，自动构建路由表
npm install uni-read-pages

截图展示

1.配置vue.config.js

注：如果根目录没有vue.config.js文件，请手动创建

// vue.config.js
const TransformPages = require('uni-read-pages')
const { webpack } = new TransformPages()
module.exports = {
	configureWebpack: {
		plugins: [
			new webpack.DefinePlugin({
				ROUTES: webpack.DefinePlugin.runtimeValue(() => {
					const tfPages = new TransformPages({
						includes: ['path', 'name', 'aliasPath']
					});
					return JSON.stringify(tfPages.routes)
				}, true)
			})
		]
	}
}

2.新建router.js文件

注：不同方式初始化的项目会有所不同。cli 源码在 src 下，ide 源码在根目录

import { RouterMount, createRouter } from 'uni-simple-router';

const router = createRouter({
	platform: process.env.VUE_APP_PLATFORM,
	routes: [...ROUTES]
});
//全局路由前置守卫
router.beforeEach((to, from, next) => {
	next();
});
// 全局路由后置守卫
router.afterEach((to, from) => {
	console.log('跳转结束')
})

export {
	router,
	RouterMount
}

3.在main.js中引入router.js

import Vue from 'vue'
import App from './App'
import store from './public/store'


import {router,RouterMount} from './router.js'  //路径换成自己的
Vue.use(router)


/* 引入uView */
import uView from "uview-ui"
Vue.use(uView)

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
	store,
    ...App
})
//v1.3.5起 H5端 你应该去除原有的app.$mount();使用路由自带的渲染方式
// #ifdef H5
	RouterMount(app,router,'#app')
// #endif

// #ifndef H5
	app.$mount(); //为了兼容小程序及app端必须这样写才有效果
// #endif

三、使用方法

• push()
• pushTab() : 跳转tar栏
• replace() : 替换
• replaceAll() ： 替换所有
• back() : 直接带上数字返回第几层

注意：path和query配合使用，而name和params配合使用

// 路由跳转页面方法
this.$Router.push({
    name: 'index',
    params: {
        name: 'Joseph',
        age: 22
    }
    
    // path: '/pages/indexindex',
    // query: {
    //     name: 'Joseph',
    //     age: 22
    // }
})

// 页面接收参数——query中的参数
onLoad(){
    // query传参
    const query=this.$Route.query
    // params传参
    const params=this.$Route.params
}


// pages.json中定义
 {
    "path": "pages/index/index",
    "name": "index",
    "style": {
        "navigationBarTitleText": "首页"
    }
}

四、组件

和vue的router-link标签功能一样，包在组件外部，实现跳转

// 首先在main.js中进行注册，将my-link注册为全局组件，注册后使用方法同<router-link>
import Mylink from './node_modules/uni-simple-router/dist/link.vue'     
Vue.component('my-link',Mylink)


// 使用
// navType对应的就是push/pushTab/replace/replaceAll
<my-link to="{path: '/pages/mine/index',query: {name: '我只想去tab5的my-link'}}" navType="pushTab">
    <button type="default">我是router-link</button>
</my-link>