Vue [acht] Kapselung des Routings vue-router

Vue [acht] Kapselung des Routings vue-router

---

---

Vorwort

Es wird sehr unübersichtlich , die gesamte Routing-Konfiguration in zu schreiben main.js. Kleine Projekte sind in Ordnung, aber große Projekte werden geblendet. Daher werden in der Entwicklung die Routen oft separat gepackt und dann main.jsin importiert.

---

1. Routing-Kapselung

• Erstellen Sie einen neuen Router-Ordner unter src und erstellen Sie dann eine neue index.js-Datei unter dem Ordner. Verzeichnisstruktur: src/router/index.js

// 必须要导入vue，在main中导入的vue在这使用不了
import Vue from 'vue'
// 2. 导入VueRouter
import VueRouter from 'vue-router'

import Your from '../views/Your'
import My from '../views/My'
import It from '../views/It'

// 3. 使用vue插件  vue的插件想要生效必须调用一个方法  Vue.use(XXXX)
Vue.use(VueRouter)

// 4. 创建一个路由对象
const router = new VueRouter({
    
    
  // 路由的规则
  // route: 一条路由规则
  routes: [
    {
    
    
      // 路径 锚点
      // 组件
      path: '/your ',
      component: Your ,
    },
    {
    
    
      path: '/my',
      component: My,
    },
    {
    
    
      path: '/it ',
      component: It ,
    },
  ],
})
//导出
export default router

2. Routing importieren

main.jsImportieren Sie die oben eingekapselte Route in

import router from './router'

new Vue({
    
    
  // 5. 关联路由对象和vue实例 data methods
  render: (h) => h(App),
  router,
}).$mount('#app')