安裝Vue-router

因為我們採用的是Webpack工程,所以直接採用Npm安裝

npm install vue-router --save

工程整合Vue-router

安裝完成後在Package.json中檢視

1:匯入路由物件並通過Vue.use載入

2:建立路由例項,並傳入路由對映配置

在src下建立router資料夾,並在裡面建立index.js

import Vue from 'vue'
// 匯入路由
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

// Vue載入
 

Vue.use(Router)

// 傳入路由對映配置 匯出路由例項
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

3:在Vue例項中掛載建立的路由例項

main.js

import Vue from 'vue'
import App from './App'
// 匯入建立的路由例項
import router from './router'

Vue.config.productionTip 
 
= false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  // 掛載路由例項
  router,
  render: h => h(App)
})

作者：彼岸舞

時間：2021\06\28

內容關於：VUE

本文屬於作者原創,未經允許,禁止轉發