uniapp中引入并使用VueRouter

1. 使用 uni-simple-router 插件,最好是 2.0.7 版本。最新版可能会有BUG
yarn add uni-simple-router@2.0.7
或者
npm install uni-simple-router@2.0.7
2. 在 src 目录下新建 router 文件夹

在这里插入图片描述

3. 新建路由写法和vue-router一样
// router/index.js
import {
    
     RouterMount, createRouter } from "uni-simple-router";
const router = new createRouter({
    
    
  platform: process.env.VUE_APP_PLATFORM,
  h5: {
    
    
    vueRouterDev: true, //完全使用vue-router开发 默认 false
  },
  routes: [
    {
    
    
      path: "/",
      name: "home",
      component: () => import("@/pages/index/index"),
      meta: {
    
    
        title: "首页",
      },
    },
    {
    
    
      path: "/about",
      name: "About",
      component: () => import("@/pages/about/index"),
      meta: {
    
    
        title: "about",
      },
    },
  ],
});

export {
    
     router, RouterMount };

4. 在 main.js 中引入
// main.js
import Vue from "vue";
import uView from "uview-ui";
import {
    
     router, RouterMount } from "./router/index.js"; 
// #ifdef H5
import "./utils/pc";
// #endif
import App from "./App";

Vue.config.productionTip = false;

App.mpType = "app";
Vue.use(uView);
Vue.use(router);
const app = new Vue({
    
    
  ...App,
});
RouterMount(app, router, "#app");
app.$mount();

猜你喜欢

转载自blog.csdn.net/weixin_53156345/article/details/133932413