1.引入

三種引用方式

第一種 npm安裝

項目根目錄命令行執(zhí)行



npm install uni-simple-router

1

第二種 插件市場（使用HBuilderX導(dǎo)入插件）



第三種 ZIP下載 解壓



2.項目中引入



import Vue from 'vue'

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

import Router from './router'

Vue.use(Router)

//...后續(xù)代碼



引入之后就開始我們的正式使用。

第一步先在項目的根目錄下創(chuàng)建一個router文件夾。

格式為：



router

|---modules

|---index.js

|---index.js



router中的modules文件夾是用來放路由表模板的。modules中的index.js內(nèi)容為



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文件讀取并整合所有路由。

在這里創(chuàng)建的js文件代碼示例：



const home = [

{

        //注意：path必須跟pages.json中的地址對應(yīng)，最前面別忘了加'/'哦

      path: '/pages/home/index',

      aliasPath:'/',  //對于h5端你必須在首頁加上aliasPath并設(shè)置為/

      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]//路由表

});



//全局路由前置守衛(wèi)

router.beforeEach((to, from, next) => {

  next()

})

// 全局路由后置守衛(wèi)

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端 你應(yīng)該去除原有的app.$mount();使用路由自帶的渲染方式

// #ifdef H5

RouterMount(app,'#app');

// #endif



// #ifndef H5

app.$mount(); //為了兼容小程序及app端必須這樣寫才有效果

// #endif



這樣你的路由就配置好了。



如果不想繁瑣的配置modules下的文件，可以用webpack自動構(gòu)建路由表

安裝



npm install uni-read-pages

1

配置 vue.config.js （可能需要手動創(chuàng)建）



const TransformPages = require('uni-read-pages')

const tfPages = new TransformPages({

//如果你需要獲取更多參數(shù)，那么請配置參數(shù)！

includes:['path','name','meta']

})

module.exports = {

    configureWebpack: {

        plugins: [

            new tfPages.webpack.DefinePlugin({

                ROUTES: JSON.stringify(tfPages.routes)

            })

        ]

    }

}



然后去pages.json里面更改配置，加入所需要的內(nèi)容

最后配置路由表



import Vue from 'vue'

//這里僅示范npm安裝方式的引入，其它方式引入請看最上面【安裝】部分

import Router from 'uni-simple-router'



Vue.use(Router)

//初始化

const router = new Router({

    routes:ROUTES //路由表

});



//全局路由前置守衛(wèi)

router.beforeEach((to, from, next) => {

  next()

})

// 全局路由后置守衛(wèi)

router.afterEach((to, from) => {

})

export default router;