欧美videos另类精品-欧美videos另类极品-欧美vide-欧美va在线视频-欧美va在线观看-欧美va在线播放免费观看

uniapp中的一個(gè)完全相似Vue-router的路由插件

2020-3-4 seo達(dá)人

1.引入

三種引用方式

第一種 npm安裝

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

npm install uni-simple-router

1

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

第三種 ZIP下載解壓

2.項(xiàng)目中引入

import Vue from 'vue'

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

import Router from './router'

Vue.use(Router)

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

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

第一步先在項(xiàng)目的根目錄下創(chuàng)建一個(gè)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

這個(gè)文件用來把同目錄下的js文件讀取并整合所有路由。

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

const home = [

{

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

path: '/pages/home/index',

aliasPath:'/', //對(duì)于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安裝方式的引入，其它方式引入請(qǐng)看最上面【安裝】部分

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自動(dòng)構(gòu)建路由表

安裝

npm install uni-read-pages

1

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

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

const tfPages = new TransformPages({

//如果你需要獲取更多參數(shù)，那么請(qǐng)配置參數(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安裝方式的引入，其它方式引入請(qǐng)看最上面【安裝】部分

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;