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:'<div>我是组件1{{msg}}</div>',

      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应用对象：

<div id="app">

          <router-link to=" /Home ">主页</router-link>

        <router-view></router-view>           <!--   必须有   -->

</div>

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

·1· 组件定义：

<script  type="text/x-template"  id="box">

          <ul>

                    <li>

                              项目1111 

                    </li>

                    <li>

                                项目2222

                    </li>     

         </ul>

</script>

·2· 组件引用：

const B={

           template:'#box'

}