uni-app开发H5使用vue-router

代码哈士奇

修改于 2025-11-21 14:46:06

1.3K0

文章被收录于专栏：dmhsq_csdn_blogdmhsq_csdn_blog

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021/03/15 ，如有侵权请联系 cloudcommunity@tencent.com 删除

vue.js