vue2.0學習筆記之webpack-simple模板中的路由簡單配置案例

標籤：ges   筆記   執行個體   引入   code   完成   sim   代碼   bpa   

以下是完成後的目錄結構

 

 

 

 

 

 

案例基礎是已經用 webpack+vue-cli 建立了一個名為 vue_router的工程 , 並安裝了vue-router 

1.  定義組件

　1.1 先在 src 目錄下建立組件檔案夾 components , 添加兩個檔案Home.vue 和 News.vue, 代碼如下：

　　Home.vue   （推薦首字母大寫）

<template>    <h3>首頁</h3></template>

　　News.vue

<template>    <h3>新聞</h3></template>

　

   1.2 然後在 src 目錄下建立配置路由的檔案 router.config.js , 代碼如下：　　

import Home from ‘./components/Home.vue‘  // 匯入組件Homeimport News from ‘./components/News.vue‘  // 匯入組件News//  export default 的好處是再匯入時模組可以隨便命名export default {    routes:[        { path:‘/home‘,component:Home },        { path:‘/news‘,component:News },        { path:‘*‘,redirect:‘/home‘ }    ]}

 

2.  引入、建立、掛載路由

     在 main.js 中修改如下：

import Vue from ‘vue‘import vueRouter from ‘vue-router‘    //  引入vue-routerimport App from ‘./App.vue‘import routerConfig from ‘./router.config.js‘   //  匯入路由配置Vue.use(vueRouter);  // 使用vueRouterconst router = new vueRouter(routerConfig);   // 定義vueRouter執行個體new Vue({  router,  //  掛載vueRouter  el: ‘#app‘,  render: h => h(App)})

 

vue2.0學習筆記之webpack-simple模板中的路由簡單配置案例