angular和vue是兩個不同的框架,但是所用和所配置的套路幾乎相同
1、引入你所要的js
2癌椿、路由顯示
3、切換路由里面的內(nèi)容
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配置里面的路由規(guī)則
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配置里面的路由規(guī)則
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>,當(dāng)配置組件的時候,里面是必須要有一個根元素
<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//獲取到你配置好的路由
})