美文网首页我爱编程
angular和vue的路由切换

angular和vue的路由切换

作者: 邪筱步 | 来源:发表于2017-09-11 20:11 被阅读0次

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//获取到你配置好的路由

})

相关文章

网友评论

    本文标题:angular和vue的路由切换

    本文链接:https://www.haomeiwen.com/subject/jqsfsxtx.html