在uniapp引入并使用 VueRouter

在uni-app中引入并使用Vue Router的基本步骤如下：

1. 安装Vue Router：

   如果你使用的是HBuilderX，那么可以直接在项目中引用vue-router。如果是使用npm，可以在项目根目录下运行以下命令来安装：

   
   
   
   npm install vue-router --save

2. 创建router实例并配置路由：

   在项目中的src目录下创建一个router文件夹，然后在该文件夹中创建index.js文件。

   // /src/router/index.js
   
   import Vue from 'vue'
   import Router from 'vue-router'
   
   // 引入页面组件
   import HomePage from '@/pages/home/home'
   import ListPage from '@/pages/list/list'
   
   Vue.use(Router)
   
   const router = new Router({
     routes: [
       {
         path: '/',
         name: 'Home',
         component: HomePage
       },
       {
         path: '/list',
         name: 'List',
         component: ListPage
       }
       // 其他路由配置...
     ]
   })
   
   export default router

   JavaScript

   Copy

3. 在main.js中引入router实例并使用：

   // /src/main.js
   
   import Vue from 'vue'
   import App from './App'
   import router from './router'
   
   Vue.config.productionTip = false
   
   App.mpType = 'app'
   
   const app = new Vue({
     ...App,
     router
   })
   app.$mount()

   JavaScript

   Copy

4. 在App.vue或页面组件中使用<router-view>和<router-link>：

   <!-- /src/App.vue -->
   
   <template>
     <div id="app">
       <router-link to="/">Home</router-link>
       <router-link to="/list">List</router-link>
   
       <router-view></router-view>
     </div>
   </template>
   
   <script>
   export default {
     onLaunch: function() {
       console.log('App Launch')
     },
     onShow: function() {
       console.log('App Show')
     },
     onHide: function() {
       console.log('App Hide')
     }
   }
   </script>

   HTML

   Copy

以上步骤完成后，你就可以在uni-app项目中使用Vue Router来管理页面路由了。