uni-simple-router Hbuilder创建的项目引

作者: flyjar | 来源:发表于2021-08-28 17:01 被阅读0次

uni-simple-router Hbuilder创建的项目引
uni-app商城项目
h5移动端项目打包成安装包
vue cli2 app开发打包中的白屏问题
git的使用
git
使用微信小程序开发工具运行uni-app项目报错 Uncaugh
uni-app入门和电商首页实现
cli2.0搭建vue项目
搭建MAVEN项目

1.打开作者的插件提供地址https://ext.dcloud.net.cn/publisher?id=15159，找到uni-simple-router和uni-read-pages，并将这俩个插件导入到项目中，可以在项目中创建一个文件存放这俩插件，也可以放到components下。

image.png
2.如果项目中没有vue.config.js就创建一下这个文件，在项目根目录下

//vue.config.js
const TransformPages = require('./uni_modules/hhyang-uni-read-pages/uni-read-pages@1.0.5') // 这个地址指向自己存放插件的地址
const {webpack} = new TransformPages()
module.exports = {
    configureWebpack: {
        plugins: [
            new webpack.DefinePlugin({
                ROUTES: webpack.DefinePlugin.runtimeValue(() => {
                    const tfPages = new TransformPages({
                        includes: ['path', 'name', 'aliasPath']
                    });
                    return JSON.stringify(tfPages.routes)
                }, true )
            })
        ]
    }
}

3.创建一个router.js文件，最好是在根目录下创建一个router的文件夹，然后次文件下创建这个文件

// router.js
import {RouterMount,createRouter} from '../uni_modules/hhyang-uni-simple-router/uni-simple-router';   // 这里指向存放插件的地址

const router = createRouter({
    platform: process.env.VUE_APP_PLATFORM,  
    routes: [...ROUTES]
});
//全局路由前置守卫
router.beforeEach((to, from, next) => {
    next();
});
// 全局路由后置守卫
router.afterEach((to, from) => {
    console.log('跳转结束')
})

export {
    router,
    RouterMount
}

4.将路由加入到vue中在 main.js 引入 router.js

// main.js

import Vue from 'vue'
import App from './App'
import {router,RouterMount} from './router/router.js' 
Vue.use(router)

App.mpType = 'app'
const app = new Vue({
   ...App
})

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

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