UNI-APP_uni-simple-router的快速上手(路由，nui路由攔截)

官網文檔：http://www.hhyang.cn/src/router/start/quickstart.html

安裝插件
npm安裝命令:npm install uni-simple-router
下載好后會多出這個文件夾

 

 

初始化
在項目的根目錄下創建如下用紅框框住的文件夾及文件

 

 

modules目錄下的index.js內容如下(這個文件主要作用是將所有路由整合成一個數組)

// router/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

　　

 

在modules目錄下home.js文件,作用是根據不同的路由分類，添加更多模塊

 // router/modules/home.js
const home = [
    {
        //注意：path必須跟pages.json中的地址對應，最前面別忘了加'/'哦
      path: '/pages/login/login',
      name: 'login',
        meta: {
            title: '登陸',
        },
    }
]
export default home 

router下的index.js配置如下

// 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) => {
    console.log("全局路由前置守衛")
     next()
})
// 全局路由后置守衛
router.afterEach((to, from) => {
    console.log("全局路由后置守衛")
})
export default router;

 

 

main.js引入

// 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

 

然后啟動我們的項目進入頁面就能看到進入路由了