本文共 1552 字，大约阅读时间需要 5 分钟。

uni-app没有vue-router如果要使用vue-router可以使用 uni-simple-router

uni-simple-router文档地址

安装

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

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

执行 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()

import Vue from 'vue'import App from './App'import {
   	router,	RouterMount} from './router/index.js'Vue.config.productionTip = falseVue.use(router);App.mpType = 'app'const app = new Vue({
   	...App})RouterMount(app, router, "#app");

如果考虑适配 适配写法参考文档

import Vue from 'vue'import App from './App'import {
   	router,	RouterMount} from './router/index.js'Vue.config.productionTip = falseVue.use(router);App.mpType = 'app'const app = new Vue({
   	...App})//#ifdef H5RouterMount(app, router, "#app");//#endif//#ifndef H5app.$mount();//#endif

欢迎加入交流群

我的博客地址

转载地址：https://dmhsq.blog.csdn.net/article/details/114841203 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！