作为一个小公司的PHPER，不喜欢乌漆墨黑的命令行（老是报错，技术又不好找不到解决方法），研究了半天vue-click以后，选择了放弃，这里用vue创建一个单页面程序，不多说上代码！
引入vue相关的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状态管理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进行导航-->
<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>
/* 创建一个vuex状态管理 */
/* 调用Vuex store 的方式只介绍两种
* 同步的方式 store.commit('increment','需要传的参数')
* 异步的方式 store.dispatch('incrementAsync',{ amount: 10 })
* 直接在组件中使用就行
*/
const store = new Vuex.Store({
state: {
count: 5
},
mutations: {/*实际改变参数状态的方法*/
increment (state, no) {
state.count = Number(state.count) + Number(no)
}
},
actions: { /*按我的理解是在actions中调用mutations的方法increment实现异步传输给组件*/
incrementAsync (context,payload) {
context.commit('increment',payload.amount)
}
}
})
/* 创建Home 组件构造器 */
const Home = Vue.extend({
template: '#home',
data: function () {
return {
msg: 'Hello, vue router!',
num: ''
}
},
methods:{
_alert:function (e){
store.dispatch('incrementAsync',{
amount: 10
}) /* 异步的方式调用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)
}
},
})
/* 创建路由映射 */
const routes = [
{ path: '/home', component: Home},
{ path: '/about', component: About },
{ path: '/', component: Home }
]
/* 创建路由器 */
var router = new VueRouter({
routes
})
// 创建一个顶层的vue实例
const vm = new Vue({
// el: 'body',
router, // 路由
components: { Home, About },
template: '#app'
})
/* 启动路由 */
const app = new Vue({
router
}).$mount('#app')
</script>
整个完整页面的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css" />
</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进行导航-->
<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)
}
}
})
/* 创建组件构造器 */
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)
}
},
})
/* 创建路由映射 */
const routes = [
{ path: '/home', component: Home},
{ path: '/about', component: About },
{ path: '/', component: Home }
]
/* 创建路由器 */
var router = new VueRouter({
routes
})
const vm = new Vue({
// el: 'body',
router,
components: { Home, About },
template: '#app'
})
/* 启动路由 */
const app = new Vue({
router
}).$mount('#app')
</script>
</html>
网友评论