第一个vue+webpack模块化之使用路由

一、vue模块化开发之使用路由

1. 生成项目

命令：vue init webpack-simple vue-cli-model

2. 进入项目目录后，安装项目需要的模块

命令：cnpm install

3. 引入路由router

3.1 先安装vue-router
    命令：cnpm install vue-router -S

3.2 操作步骤
    1). 在main.js内引入vue-router
        import VueRouter from 'vue-router' //  引入vue-router模块

    2). 使用路由，vue.use()方法：
        Vue.use(VueRouter)

    3). 在App.vue中加上路由跳转和渲染
        <router-link to="/home">主页</router-link>
        <router-link to="/news">新闻</router-link>

        <keep-alive>        
            <router-view></router-view>     // 路由内容展示区
        </keep-alive>

    4). 分别创建Home.vue和News.vue模版，内容如下
        Home:
        <template>
            <div id="Home">