uni-app开发H5使用vue-router

妖狐艹你老母 2022-11-09 14:14 440阅读 0赞

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

# 安装 #

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

进入根目录可以通过右键项目文件夹  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70]  
在这里输入 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][https_hhyang.cn_v2_start_cross_explian.html]

欢迎加入交流群  
535620886 974178910

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

[https_hhyang.cn]: https://hhyang.cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70]: /images/20221023/0e23d771860b4ce5b322fe64fb982023.png
[https_hhyang.cn_v2_start_cross_explian.html]: https://hhyang.cn/v2/start/cross/explian.html
[https_dmhsq.blog.csdn.net]: https://dmhsq.blog.csdn.net/