作為一個(gè)小公司的PHPER，不喜歡烏漆墨黑的命令行（老是報(bào)錯(cuò)，技術(shù)又不好找不到解決方法），研究了半天vue-click以后，選擇了放棄，這里用vue創(chuàng)建一個(gè)單頁面程序，不多說上代碼！
引入vue相關(guān)的CDN,建議在https://www.bootcdn.cn/去找，
- vue.js的CDN https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js
- vue的路由 https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js
- vue狀態(tài)管理vuex https://cdn.bootcss.com/vuex/3.0.1/vuex.js
html代碼只有body 部分
<body>
<div id="app">
<div class="row">
<div class="col-xs-offset-2 col-xs-8">
<div class="page-header">
<h2>Router Test</h2>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-2 col-xs-offset-2">
<div class="list-group">
<!--使用指令v-link進(jìn)行導(dǎo)航-->
<router-link to='/home' class="list-group-item" >Home</router-link>
<router-link to='/about' class="list-group-item" >About</router-link>
</div>
</div>
<div class="col-xs-6">
<div class="panel">
<div class="panel-body">
<!--用于渲染匹配的組件-->
<router-view></router-view>
</div>
</div>
</div>
</div>
</div>
// home路由部分
<template id="home">
<div>
<h1 @click="_alert(123)">Home</h1>
<p>{{num}}</p>
</div>
</template>
// about路由部分
<template id="about">
<div>
<h1>About</h1>
<p>{{num}}</p>
</div>
</template>
</body>
js部分的代碼
<script>
/* 創(chuàng)建一個(gè)vuex狀態(tài)管理 */
/* 調(diào)用Vuex store 的方式只介紹兩種
* 同步的方式 store.commit('increment','需要傳的參數(shù)')
* 異步的方式 store.dispatch('incrementAsync',{ amount: 10 })
* 直接在組件中使用就行
*/
const store = new Vuex.Store({
state: {
count: 5
},
mutations: {/*實(shí)際改變參數(shù)狀態(tài)的方法*/
increment (state, no) {
state.count = Number(state.count) + Number(no)
}
},
actions: { /*按我的理解是在actions中調(diào)用mutations的方法increment實(shí)現(xiàn)異步傳輸給組件*/
incrementAsync (context,payload) {
context.commit('increment',payload.amount)
}
}
})
/* 創(chuàng)建Home 組件構(gòu)造器 */
const Home = Vue.extend({
template: '#home',
data: function () {
return {
msg: 'Hello, vue router!',
num: ''
}
},
methods:{
_alert:function (e){
store.dispatch('incrementAsync',{
amount: 10
}) /* 異步的方式調(diào)用vuex */
this.num = store.state.count /*獲取vuex中count的值*/
console.log( this.num )
}
},
created:function(){
this.num = store.state.count
console.log( this.num ) // -> 1
}
})
/* About 路由的組件*/
const About = Vue.extend({
template: '#about',
data: function () {
return {
msg: 'Hello, vue router6666666666!',
num: store.state.count
}
},
methods:{
_alert:function(e){
alert(e)
}
},
})
/* 創(chuàng)建路由映射 */
const routes = [
{ path: '/home', component: Home},
{ path: '/about', component: About },
{ path: '/', component: Home }
]
/* 創(chuàng)建路由器 */
var router = new VueRouter({
routes
})
// 創(chuàng)建一個(gè)頂層的vue實(shí)例
const vm = new Vue({
// el: 'body',
router, // 路由
components: { Home, About },
template: '#app'
})
/* 啟動(dòng)路由 */
const app = new Vue({
router
}).$mount('#app')
</script>
整個(gè)完整頁面的代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" />
</head>
<body>
<div id="app">
<div class="row">
<div class="col-xs-offset-2 col-xs-8">
<div class="page-header">
<h2>Router Basic - 01</h2>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-2 col-xs-offset-2">
<div class="list-group">
<!--使用指令v-link進(jìn)行導(dǎo)航-->
<router-link to='/home' class="list-group-item" >Home</router-link>
<router-link to='/about' class="list-group-item" >About</router-link>
</div>
</div>
<div class="col-xs-6">
<div class="panel">
<div class="panel-body">
<!--用于渲染匹配的組件-->
<router-view></router-view>
</div>
</div>
</div>
</div>
</div>
<template id="home">
<div>
<h1 @click="_alert(123)">Home</h1>
<p>{{num}}</p>
</div>
</template>
<template id="about">
<div>
<h1>About</h1>
<p>{{num}}</p>
</div>
</template>
</body>
<script src="./js/vue.js"></script>
<script src="./js/vue-router.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.js"></script>
<script>
const store = new Vuex.Store({
state: {
count: 5
},
mutations: {
increment (state, no) {
state.count = Number(state.count) + Number(no)
}
},
actions: {
incrementAsync (context,payload) {
context.commit('increment',payload.amount)
}
}
})
/* 創(chuàng)建組件構(gòu)造器 */
const Home = Vue.extend({
template: '#home',
data: function () {
return {
msg: 'Hello, vue router!',
num: ''
}
},
methods:{
_alert:function (e){
store.dispatch('incrementAsync',{
amount: 10
})
this.num = store.state.count
console.log( this.num )
}
},
created:function(){
this.num = store.state.count
console.log( this.num ) // -> 1
}
})
/* About 路由的組件 */
const About = Vue.extend({
template: '#about',
data: function () {
return {
msg: 'Hello, vue router6666666666!',
num: store.state.count
}
},
methods:{
_alert:function(e){
alert(e)
}
},
})
/* 創(chuàng)建路由映射 */
const routes = [
{ path: '/home', component: Home},
{ path: '/about', component: About },
{ path: '/', component: Home }
]
/* 創(chuàng)建路由器 */
var router = new VueRouter({
routes
})
const vm = new Vue({
// el: 'body',
router,
components: { Home, About },
template: '#app'
})
/* 啟動(dòng)路由 */
const app = new Vue({
router
}).$mount('#app')
</script>
</html>
