我爱编程

angular和vue的路由切换

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

})

上一篇 下一篇

猜你喜欢

热点阅读