Vue路由的单页面应用

VueJs路由的简单单页面应用：

1.路由的认识：传统的页面跳转是用超链接a来实现的，路由功能与它类似。路由将路径和组件映射起来来实现设定访问路径，适用于单页面应用。

2.在刚开始引用的时候就出现问题：各种类似的“component of undefined , Vue is not defined, VueRouter is not defined ”报错。通过仔细的查找和试验，证实是版本的问题，解决办法：下载对应的环境和版本

npm install vue 

npm install vue-router

3.实现步骤：

·1· 引用文件vue.js和vue-router.js

·2· 创建组件：

const home={

      template:'

我是组件1{{msg}}

',

      data:function(){

            return {

                   msg:'我是数据'

             }

       }

}

·3· 定义路由（设定跳转路径）：

           const    routes={

                        {path:'/Home',component:home   }

           }

·4· 新建路由：

const     router = new VueRouter({

              routes                                          // （缩写）相当于 routes: routes

})

·5· 启动（挂载）路由：

const     app = new Vue({

              router

}).$mount('#app');

·6· 路由的css应用对象：

          主页

                   

4.组件的提取：如果组件内容太多，可以单独拎出来：

·1· 组件定义：

         

                   

•                               项目1111 

                     

                   

•                                 项目2222

                     

     

         

·2· 组件引用：

const B={

           template:'#box'

}