Weex環境構建(四)vue-router
阿新 • • 發佈:2019-02-19
簡介
vue-router是vue.js提供的路由外掛。
這裡主要是用來支援頁面跳轉。
操作
新增檔案及其程式碼
建立路由
//src/router.js
import Router from 'vue-router'
import CounterView from './views/Counter.vue'
import CounterSView from './views/CounterStore.vue'
import Hello from './views/Hello.vue'
Vue.use(Router)
export default new Router({
// mode: 'abstract' ,
routes: [
{ path: '/counter', component: CounterView },
{ path: '/counters', component: CounterSView },
{ path: '/hello', component: Hello },
{ path: '/', redirect: '/hello' }
]
})
將路由插入vue
//src/entry.js
var vm = new Vue(Vue.util.extend(
{ el: '#root',
store,
router,//<----
}, App))
//src/App.vue
<template>
<div @androidback="back">
<p>
<router-link to="/bar">Go to Bar</router-link>
<router-link to="/counter">counter</router-link>
<router-link to="/hello">hello</router-link>
</p>
<router-view style="flex:1"></router-view>
</div>
</template>
<script>
export default {
methods: {
back: function () {
this.$router.back()
}
}
}
</script>
此時執行瀏覽器可以看到路由效果。但是native時不能用,weex文件中提到native不支援有兩點:
- ul、li等標籤。
- vue-router不能支援導航連結,只支援程式設計式導航
so,修改如下
//src/App.vue
<template>
<div @androidback="back">
<list class="list">
<cell class="cell" @click="jump('/hello')">
<text>hello<text>
</cell>
<cell class="cell" @click="jump('/')">
<text>/<text>
</cell>
<cell class="cell" @click="jump('/counter')">
<text>counter<text>
</cell>
</list>
<router-view style="flex:1"></router-view>
</div>
</template>
//serc/mixins/index.js
export default {
methods: {
jump (to) {
console.log('to='+to);
if (this.$router) {
this.$router.push(to)
}
}
}
}
import mixins from './mixins'
//src/entry.js
Vue.mixin(mixins)
Vue.mixin是Vue的混合組建。上面使用全域性註冊混合物件。 注意使用! 一旦使用全域性混合物件,將會影響到 所有 之後建立的 Vue 例項。使用恰當時,可以為自定義物件注入處理邏輯。
so,每一個vue的例項都有了jump方法。
瀏覽器執行正常,native依然失敗。原因未知,經過多次試驗,將jump放到router-view中呼叫則無問題。
修改程式碼如下:
//src/App.vue
<template>
<div @androidback="back">
<router-view style="flex:1"></router-view>
</div>
</template>
//src/views/Helle.vue
<div class="wrapper" @click="jump('/counter')">
//src/views/Counter.vue
<button @click="jump('/hello')">Increment async</button>
native可實現兩個頁面互相跳轉。至於原因,初學還未知,以後學到了回來補上。
結構目錄也發生了變化。將原來components=>views下
views下放頁面。
components下放元件。
api下放非同步回撥方法,比如http請求。
至此大體的框架已經有了,之後還會持續修改。比如有部落格說用weex不建議用vue-router做頁面跳轉,建議使用多頁面做跳轉。