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'

}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 例子: 举例子的重要性:与自己相关的事情,体会才深。一个官员咨询税务政策时,总是问如果收入到了1500元,个税该怎...
    爷有蔓草阅读 2,372评论 0 0
  • 寻乡问径将及暮,望断来时路。 见君重抚六弦琴,赋请一轮明月醉江临。 浮云俗世笙箫外,曲道情常在。 还约明日看黄花,...
    一草雨田阅读 1,514评论 0 1
  • [前端技术] Geralt原创 首先,需要先简单理解一下html,html可以理解为一种标记,被不同的标记包裹的文...
    CoverUER阅读 3,561评论 0 0
  • 一转眼写觉察日记21天了,谢谢自己,请继续保持下去吧~ 今天刷完第二遍《内在小孩》,每一次读都能感觉到不同的点,我...
    Jocelynwang阅读 1,098评论 0 0
  • 十八岁了,成年了,思想仿佛也一下子成熟了许多。 我不会再为电子游戏的记录而欢呼雀跃,不会再为电视节目中壮烈的场面而...
    MrME_Lee阅读 3,365评论 0 0