uni-simple-router的使用
一、安装NPM依赖uni-simple-router提供了基于NPM的链接,通过NPM安装,可以确保与最新款同步,同样你还可以指定版本或者tag// 项目根目录执行命令行npm install uni-simple-router截图展示二、初始化自动读取路由表构建路由// 根据pages.json总的页面,自动构建路由表npm install uni-read-pages截图展示1.配置vue.c
·
一、安装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>
更多推荐
已为社区贡献1条内容
所有评论(0)