angular和vue的路由切换

angular和vue是两个不同的框架,但是所用和所配置的套路几乎相同

1、引入你所要的js

2、路由显示

3、切换路由里面的内容

4、路由就js配置

1、angular.min.js,angular.route.min.js

1.1、引用插件

1.2、<ng-view></ng-view>

1.3、<li><a href="#/">首页</li>

1.4、用.when和.otherwise配置里面的路由规则

2、angular.min.js,angular-ui-router.js

2.1、引用插件

2.2、<ui-view></ui-view>

2.3、<li><a href="index">首页</li>

2.4、用state和.otherwise配置里面的路由规则

3、vue.min.js,vue-router.min.js

3.1、引用插件

3.2、<router-view></router-view>

3.3、在页面中必须写一个依赖元素

<div id="app"></div>

3.4、<li><router-link to="/home">首页</></li>

3.5、配置组件<template></template>,当配置组件的时候,里面是必须要有一个根元素

<template id="home">

<div><h1>首页页面</h1></div>

</template>

3.6、配置js,先获取到组件

var home=Vue.extend({

template:"#home"

})

3.7、配置js路由

var router=new VueRouter({

  routes:[

      {path:"/home",component:home},

      {path:"/",redirect:"/home"}

]

})

3.8、实例化vue

var vue=new Vue({

el:"#app",//获取到页面的依赖元素

router:router//获取到你配置好的路由

})

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Angular.js 是一个用来构建“富客户端”的神奇JavaScript框架。但是事实却是许多开发者却不使用其内...
    一口咖啡一口茶阅读 15,443评论 5 39
  • 线上1对1的模式是最近才悄悄火起来的,特别是K12生态和成人学习英语的生态,1对1给用户的感觉就是针对性强,有个性...
    IT民工华仔阅读 5,241评论 0 2
  • 有的人用文字写作,有的人用生命写作。用文字写出的是故事,用生命写出的是人生。
    薇薇安的30天阅读 1,517评论 0 0
  • 不管我是否接受,爸爸妈妈正在一天天地老去,因为不跟他们住在一起,每次的见面都让我骤然感受到日子在他们身上留下了痕迹...
    辛馨阅读 1,950评论 0 0
  • 演唱会后回到北京家中,发现阳台外面的树全部冒出绿芽了。接连几天下了小雨,空气里满是泥土混合青草气息,加湿器可以关了...
    大胡咩咩阅读 3,025评论 0 0

友情链接更多精彩内容