一个简单的模块化项目：

使用vue-cli、webpack构建的项目。项目的具体构建以及项目中各种配置，涉及到太多内容，这里不讨论。只讲一下简单的应用。

所做的工作都在src文件夹下。

在根目录下，有一个index.html，是访问项目时默认的页面，在页面加载后，可以看到其引入了app.js文件。应该是工程中通过某种方式生成的一个js文件。我们需要关心的只是

main.js文件。将main.js文件修改后如下：

main.js:

    import Vue from 'vue'

    import App from './App'

    

    // 引入路由组件、自定义路由组件

    import VueRouter from "vue-router"   

    import router from "./router"

    

    //使用路由组件

    /*如果是直接在html页面中使用，引入js文件后，会自动安装*/

    /*在模块工程中使用vue-router，需要通过Vue.use()明确的安装路由功能。*/

    Vue.use(VueRouter)

    

    new Vue({

      el: '#app',

      template: '<App/>',

      /*注意在 ES2015+ 中，在对象中放一个类似 ComponentA 的变量名其实是 ComponentA: ComponentA 的缩写，和Babel以及webpack有关系*/

      components: { App },

      router:router

    })

 

其中引入了我们自定义的router.js文件以及App.vue组件。

App.vue组件和main.js位于同级目录下。App.vue项目创建时自带，这里对它进行了修改。当然，我们自己创建一个组件，然后引入也可。

App.vue:

      <template>

      <div>

        <nav class="top-menu">

            <ul>

                <li v-for="item in menulist">

                    <router-link :to="item.url">{{item.name}}</router-link>

                </li>

            </ul>

        </nav>

        <hr>

        <div>

            <router-view></router-view>

        </div>

      </div>

    </template>

 

    <script>

        export default {

            name:'app',

            data:function(){

                return {

                    menulist:[

                        {name:'首页',url:'/home'},

                        {name:'用户',url:'/user/18'},

                        {name:'产品',url:'/product/20'}

                    ]

                }

            }

        }

 

    </script>

 

    <style>

    #app {

    }

    .top-menu ul, .top-meun li{

        list-style:none;

    }

 

    .top-menu{

        overflow:hidden;

    }

 

    .top-menu li{

        float:left;

        width:100px;

    }

    </style>

观察渲染后的页面可以看出，vue将挂载点的内容替换为了App.vue中的模板内容。

 

router.js文件和main.js位于同级目录下。

router.js:

    /*import语法是ES6标准规范，使用export指令导出接口，import指令导入模块。*/

    /*直接写文件名，则从node_modules下面开始找。*/

    import VueRouter from 'vue-router'

 

    /*使用./、../等相对路径写法时，按相对路径来找export出来的内容*/

    import Home from "./components/home.vue"

 

    /*路径中使用@开头，这时webpack配置的路径别名。默认配置为src路径。*/

    import User from "@/components/user.vue"

    import Product from "@/components/product.vue"

    /*如果最终找到的是一个文件夹，则首先看文件夹下是否有package.json。有的话会加载main字段指向的文件。没有的话，找文件夹下的index文件并加载*/

 

    /*定义注册3个路由*/

    /*导出创建的VueRouter对象，创建时传入配置参数*/

    export default new VueRouter({

        routes:[{path:"/home",component:Home},

                /*动态路径参数，以冒号开头*/

                /*当匹配到一个路由时，参数值会被设置的到this.$route.params中，可以使用this.$route.params.id来取出参数值*/

                {path:"/user/:id",component:User},

                {path:"/product/:id",component:Product}]

    })

对于在页面上，想要导航的页面，把他们引入到了router.js中，并将他们注册为了路由。本例中，三个页面都是单独的组件，放在了src/components目录下。它们内容类似。

home.vue:

    <!--模板部分-->

    <template>

        <div class="home">

            <h3>{{message}}</h3>

        </div>

    </template>

 

    <!--js代码部分-->

    <script>

        /*导出接口。default表示采用默认导出的方式*/

        export default{

            name:'home',

            data(){

                return {

                    message:'这里是home视图'

                }

            }

        }

    </script>

 

    <!--css样式部分-->

    <style scope>

        h3 {

            background-color:#c5c5c5

        }

    </style>

 

user.vue:

    <template>

        <div>

            <h3>{{message}}，获取到的参数是：{{$route.params.id}}</h3>

        </div>

    </template>

 

    <script>

        export default{

            name:'user',

            data(){

                return{

                    message:'这里是user视图'

                }

            }

        }

    </script>

 

    <style scope>

        h3 {

            background-color:gold

        }

    </style>

 

product.vue:

    <template>

        <div class="product">

            <h3>{{message}}，获取到的参数是{{$route.params.id}}</h3>

        </div>

    </template>

 

    <script>

        export default{

            name:'product',

            data(){

                return{

                    message:'这里是product视图'

                }

            }

        }

    </script>

 

    <style>

        h3 {

            background-color:violet

        }

    </style>

将以上文件放在可运行的工程下。访问http://localhost:8080 可以看到如下的效果：

对于端口号，可以修改 cofig/index.js中的配置进行更改。