uniapp中采用vue-router的方式

本文介绍了在uni-app中如何采用uni-simple-router作为路由管理,并通过uni-read-pages插件自动构建路由表。详细步骤包括npm安装、项目引入、配置router和main.js,以及使用webpack自动构建。在配置完成后,强调了需要重新编译运行以使改动生效。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

插件:uni-simple-router
一个更为简洁的Vue-router,专为 uni-app 量身打造
快速上手文档地址:https://hhyang.cn/v2/start/quickstart.html
插件作者: 1606726660@qq.com
插件文档:插件文档地址
文档镇楼

一、安装方式

三种方式
1.npm安装
项目根目录 命令行 执行

npm install uni-simple-router

2. 插件市场(使用HBuilderX导入插件)
插件地址: https://ext.dcloud.net.cn/plugin?id=578
3. ZIP下载 解压

二、项目中引入

import Vue from 'vue'
import {RouterMount} from 'uni-simple-router';
import Router from './router'
Vue.use(Router)
//...后续代码

引入之后就正式使用。
第一步:先在项目的根目录下创建一个router文件夹。
格式为:

router
|---modules
	|---index.js
|---index.js

router中的modules文件夹是用来放路由表模板的。
modules中的index.js内容为:

const files = require.context('.', false, /\.js$/)
const modules = []

files.keys().forEach(key => {
	if (key === './index.js') return
	const item = files(key).default
	modules.push(...item)
})

export default modules

这个文件用来把同目录下的js文件读取并整合所有路由。
在这里创建的js文件代码示例:

const home = [{
	//注意:path必须跟pages.json中的地址对应,最前面别忘了加'/'哦
	path: '/pages/home/index',
	aliasPath:'/', //对于h5端你必须在首页加上aliasPath并设置为/
	name: 'index',
	meta: {title: '首页',},
},
{
	path: '/pages/home/list',
	name: 'list',
	meta: {title: '列表',},
}]
export default home

第二步:配置router下的index.js

import modules from './modules'
import Vue from 'vue'
//这里仅示范npm安装方式的引入,其它方式引入请看最上面【安装】部分
import Router from 'uni-simple-router'

Vue.use(Router)
//初始化
const router = new Router({
	routes: [...modules]//路由表
});

//全局路由前置守卫
router.beforeEach((to, from, next) => {
	next()
})
// 全局路由后置守卫
router.afterEach((to, from) => {
})
export default router;

第三步:配置main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import { RouterMount } from 'uni-simple-router'

App.mpType = 'app'

const app = new Vue({
	...App
})
//v1.3.5起 H5端 你应该去除原有的app.$mount();使用路由自带的渲染方式
// #ifdef H5
RouterMount(app,'#app');
// #endif

// #ifndef H5
app.$mount(); //为了兼容小程序及app端必须这样写才有效果
// #endif

这样你的路由就配置好了。

如果不想繁琐的配置modules下的文件,可以用webpack自动构建路由表

1.安装插件: uni-read-pages
插件地址:https://ext.dcloud.net.cn/plugin?id=1220

npm install uni-read-pages

2.配置 vue.config.js (可能需要手动创建)

const TransformPages = require('uni-read-pages')
const tfPages = new TransformPages({
	//如果你需要获取更多参数,那么请配置参数!
	includes:['path','name','meta']
})
module.exports = {
	configureWebpack: {
		plugins: [
			new tfPages.webpack.DefinePlugin({
				ROUTES: JSON.stringify(tfPages.routes)
			})
		]
	}
}

然后去pages.json里面更改配置,加入所需要的内容
(此处做额外说明:请翻到最后看额外说明)
3.最后配置路由表

import Vue from 'vue'
//这里仅示范npm安装方式的引入,其它方式引入请看最上面【安装】部分
import Router from 'uni-simple-router'

Vue.use(Router)
//初始化
const router = new Router({
	routes:ROUTES //路由表
});

//全局路由前置守卫
router.beforeEach((to, from, next) => {
	next()
})
// 全局路由后置守卫
router.afterEach((to, from) => {
})
export default router;

最后,在配置完成以后

一定要重新编译运行,
一定要重新编译运行,
一定要重新编译运行,
。。。。。。。。
当修改page.json中的文件时,修改后需要重新运行才能生效

额外说明:
本人项目中用的是 uni-simple-router和 uni-read-pages
直接在目录下建了router.js文件,

import Vue from 'vue'
import Router, {
	RouterMount
} from 'uni-simple-router';

import store from './store/index.js'

Vue.use(Router)
//初始化
const router = new Router({
	h5: {
		loading: true,
	},
	APP: {
		animation: {
			animationType: 'pop-in',
			animationDuration: 300
		}
	},
	routes: [...ROUTES], //路由表
	encodeURI: false
});

//全局路由前置守卫
router.beforeEach(async (to, from, next) => {
	//自己项目中的逻辑
})
// 全局路由后置守卫
router.afterEach((to, from) => {
})

export {
	RouterMount,
	router
}

配置vue.config.js文件:
在这里插入图片描述
在includes中添加了其他的参数,所以在page.json中需要配置一下,需要在哪个路径下用到,就在哪个路径下加入该参数:
在这里插入图片描述

### 如何在 UniApp 中设置和使用 Vue-Router #### 安装依赖包 为了能够在项目中使用 `Vue Router`,需要先安装对应的库。对于基于 Vue 2 的 UniApp 应用程序来说,可以采用兼容版本的路由插件。 ```bash npm install vue-router@3 uni-simple-router --save ``` #### 创建路由器实例 创建一个新的 JavaScript 文件来定义应用程序所需的全部路径映射关系。通常命名为 `router.js` 或者放置于专门存放配置文件夹下的同名文件内: ```javascript // src/router/index.js import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const routes = [ { path: '/', name: 'Home', component: () => import('@/pages/Home') }, // 添加更多路由... ] export default new VueRouter({ mode: 'hash', // 使用 hash 模式的 URL 路由 base: process.env.BASE_URL, routes }) ``` #### 修改入口文件引入并挂载路由器对象 打开项目的根组件文件(通常是 App.vue),在此处导入刚刚创建好的路由器模块,并将其作为选项传递给新的 Vue 实例: ```html <!-- src/App.vue --> <template> <view class="container"> <!-- 注意这个 router-view 是不能去掉的 --> <router-view></router-view> </view> </template> <script> import router from './router' export default { router, // 将路由注册到全局 } </script> ``` #### 配置页面布局结构 确保各个功能页都遵循相同的模板样式,在各自的 `.vue` 单文件组件里保留 `<router-view>` 标签以便加载子视图内容[^1]。 通过上述操作之后就可以像普通的 Web 开发那样利用编程方式或者声明式导航实现不同界面之间的跳转了。值得注意的是由于平台差异的存在,某些特性可能无法跨端一致工作,因此建议开发者仔细阅读官方文档中的注意事项部分[^2]。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值