Vue路由

route 路由

单组件路由

1. 切换到项目根目录 cd
2. 安装路由：cnpm install vue-router --save
3. 在main.js里面导入并且配置

3.1 导入vue-router并注册上

```
import VueRouter from 'vue-router';

Vue.use(VueRouter);
```

3.2 创建组件，并导入组件

```
import homePage from './components/home-page.vue';

import newsPage from './components/news-page.vue';
```

3.3 配置路由,定义路由->实例化路由->挂载路由

```
const routes = [
{ path: '/home', component: homePage },
{ path: '/news', component: newsPage },

{ path: '', redirect: '/home' } /默认跳转路由*/
]

const router = new VueRouter({
routes // （缩写）相当于 routes: routes
})

new Vue({
el: '#app',
router,
render: h => h(App)
})
```

4. 使用路由，在根组件App.vue的模板里

   <router-link to="/home">首页</router-link>
   <router-link to="/news">新闻</router-link>
   
       <hr>
   
   <router-view></router-view>
   

模块化路由

1. 新建一个文件夹，新建一个router.js文件，将原先在main.js里写的以下代码拷贝到router.js,注意组件路径
2. 在main.js里导入router.js，并挂载到vue