uni-app开发H5使用vue-router

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了uni-app开发H5使用vue-router，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1734字，纯文字阅读大概需要3分钟。

内容图文

uni-app没有vue-router如果要使用vue-router可以使用 uni-simple-router
uni-simple-router文档地址 https://hhyang.cn/

安装

在uni-app项目根目录 执行 npm install uni-simple-router

进入根目录可以通过右键项目文件夹

在这里输入 cmd即可快速打开cmd

执行 npm install uni-simple-router安装即可

配置路由

新建router目录 在router目录下新建Index.js

引入 uni-simple-router的RouterMount createRouter

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

新建路由写法和vue-router一样 注意开启完全使用vue-router开发

import {
	RouterMount,
	createRouter
} from 'uni-simple-router';
import index from '../pages/index/index.vue'
const router = new createRouter({
	platform: process.env.VUE_APP_PLATFORM,
	h5: {
		vueRouterDev: true, //完全使用vue-router开发 默认 false
	},
	routes: [{
		path: '/',
		name: 'home',
		component: index,
		meta: {
			title: '首页'
		},
		children: [{
			path: '/one',
			name: 'one',
			component: () => import('@/pages/one/one.vue'),
		}],
	}]
})

router.beforeEach((to, from, next) =>{
	//路由守卫
})

export {
	router,
	RouterMount
};

引入

官方推荐不再单纯使用 app.$mount()
如果你只是写H5端 不考虑适配小程序可以这样写

import Vue from 'vue'
import App from './App'
import {
	router,
	RouterMount
} from './router/index.js'



Vue.config.productionTip = false



Vue.use(router);
App.mpType = 'app'



const app = new Vue({
	...App
})

RouterMount(app, router, "#app");

如果考虑适配 适配写法参考文档 https://hhyang.cn/v2/start/cross/explian.html

import Vue from 'vue'
import App from './App'
import {
	router,
	RouterMount
} from './router/index.js'



Vue.config.productionTip = false



Vue.use(router);
App.mpType = 'app'



const app = new Vue({
	...App
})
//#ifdef H5
RouterMount(app, router, "#app");
//#endif

//#ifndef H5
app.$mount();
//#endif

欢迎加入交流群
535620886 974178910

我的博客地址 https://dmhsq.blog.csdn.net/

内容总结

以上是互联网集市为您收集整理的uni-app开发H5使用vue-router全部内容，希望文章能够帮你解决uni-app开发H5使用vue-router所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---