這兩天學習了Vue.js 感覺路由這個地方知識點挺多的，而且很重要，所以，今天添加一點小筆記。

項目基本手腳架搭建完畢后，建一個router文件夾，里面配置一個index.js文件。

文件內(nèi)容：

npm install vue-router vue-resource --save-dev（安裝 vue 路由模塊vue-router和網(wǎng)絡請求模塊vue-resource）

import Vue from 'vue' import Router from 'vue-router' （----引入路由---注釋說明） import About from '@/components/about'（--這些需要引入的是components文件夾下面創(chuàng)建的一些模板---相對路徑----about代表about.vue模塊） import Home from '@/components/home' import Brand from '@/components/brand' import Company from '@/components/company' import Connect from '@/components/connect' import Main from '@/components/main' import Join from '@/components/join' import News from '@/components/news' import Products from '@/components/products' import son1 from '@/components/son1' import son2 from '@/components/son2' import list from '@/components/list' import newList from '@/components/newList' import culture from '@/components/culture' import certification from '@/components/certification' import zhuanjia from '@/components/zhuanjia' Vue.use(Router) （--使用---）  export default new Router({  routes: [   {    path: '/main',    name: 'main',    component: Main   },--------------------------------   { path: '/',           這里是路由重定向，比如頁面加載時候進入首頁    redirect: '/main'          （比如給路由一個選中后的樣式為紅色 那么這里就能用到了---.router-link-active{樣式}）   },---------------------------------   {---------------------這里是配置子路由    path: '/brand',    name: 'brand',    component: Brand,    children: [     {      path: '/',      name: 'newList',      component: newList     },     {      path: '/brand/culture',      name: 'culture',      component: culture     },     {      path: '/brand/certification',      name: 'certification',      component: certification     },     {      path: '/brand/zhuanjia',      name: 'zhuanjia',      component: zhuanjia     }    ]   },   {    path: '/about',    name: 'about',    component: About   },   {    path: '/company',    name: 'company',    component: Company   },   {    path: '/connect',    name: 'connect',    component: Connect   },   {    path: '/home',    name: 'home',    component: Home   },   {    path: '/join',    name: 'join',    component: Join,    children: [     {      path: '/',      name: 'son1',      component: son1     },     {      path: '/join/son2',      name: 'son2',      component: son2     }    ]   },   {    path: '/list',    name: 'list',    component: list   },   {    path: '/news',    name: 'news',    component: News   },   {    path: '/products',    name: 'products',    component: Products   }  ] }) 

接下來就是在每一個模塊文件中加入這樣的一句話暴露出去：