uni-app开发H5使用vue-router

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

代码语言：javascript复制

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

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

代码语言：javascript复制

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端 不考虑适配小程序可以这样写

代码语言：javascript复制

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

代码语言：javascript复制

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

vue.js npm https 命令行工具 网络安全

0 人点赞