淺談vue-router(一)

簡介:vue-router是Vue.js官方提供的路由插件，用於構建單頁面應用
vue-router是基於組件的
路由用於設定特定的訪問路徑，講路徑和組件映射起來
在vue-router單頁面應用中頁面的路徑改變就是組件之間來回切換

步驟一:
路由的安裝 npm install vue-router --save
步驟二:
路由的使用
1.導入路由對象import... 並調用 Vue.use(...)
2.建立實例路由,配置映射路徑
3.在根組件中掛載路由實例

import VueRouter from 'vue-router'//導入路由對象
import Home from '../views/Home.vue'

Vue.use(VueRouter)//安裝路由插件

const routes = [//路徑的配置 每一個路徑選項都是一個對象
{
  path: '/',
  name: 'Home',
  component: Home
},
{
  path: '/about',
  name: 'About',
  component: () => import('../views/About.vue')//懶加載配置
}
]
const router = new VueRouter({
mode: 'history',//路由模式
base: process.env.BASE_URL,
routes
})

export default router//導出路由實例對象

路由的掛載

import Vue from 'vue'
import App from './App.vue'
import router from './router'//將路由實例導入

Vue.config.productionTip = false

new Vue({
  router,//在vue的根組件實例中傳入路由
  render: h => h(App)
}).$mount('#app')