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