mpvue 是一款基于 Vue.js 的小程序開發框架,支持使用 Vue.js 的語法和特性進行小程序開發。在使用 mpvue 進行開發時,可以使用 Vue Router 路由進行管理,實現頁面的跳轉和參數傳遞。
首先,我們需要安裝 Vue Router。在項目根目錄下,執行以下命令安裝:
npm install vue-router --save
然后,在 main.js 中引入 Vue Router,并注冊:
import Vue from 'vue' import App from './App' import router from './router' Vue.config.productionTip = false App.mpType = 'app' const app = new Vue({ router, ...App }) app.$mount()
接下來,創建路由配置文件 router.js。在該文件中,我們需要引入 Vue 和 Vue Router,并定義路由對象。路由對象包括路由路徑和對應的組件,可以使用 children 屬性定義子路由:
import Vue from 'vue' import Router from 'vue-router' import Index from '@/pages/index' import Detail from '@/pages/detail' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'index', component: Index }, { path: '/detail', name: 'detail', component: Detail }, { path: '/category', name: 'category', component: Category, children: [ { path: 'product', name: 'product', component: Product } ] } ] })
在路由配置文件中定義路由對象后,還需要在 App.vue 文件中添加<router-view />
標簽,該標簽作為路由組件的容器:
<template><div id="app"> <router-view /> </div> </template>
定義好路由后,我們可以使用$router.push()
或$router.replace()
方法進行路由跳轉,也可以使用$route.params
獲取路由傳遞的參數。這些方法和屬性可以在組件的 methods 或 computed 中使用。
另外,Vue Router 還提供了很多高級功能,比如路由導航守衛、動態路由和路由懶加載等。通過使用這些功能,我們可以更加靈活地控制頁面的跳轉和渲染。