vue 路由
vue-router2
注意:[email protected]只适用于Vue2.x版本
安装
1.你也可以用
<script src="../js/vue-router.js"></script>引入这种方式,但一般用倾向于用webpack模块化的方法
2.
npm install [email protected] --save-dev,为了让package.json中打上一个log,后面加上--save-dev
如果在一个模块化的工程中使用,必须通过Vue.use()明确的安装路由功能,例如
import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter)
如果使用全局的script标签,则无需如此(手动安装)
重定向
重定向也是通过routes配置来完成,下面就是/a到/b
const router = new VueRouter({ routes:[{ path:'/a',redirect:'/b' }] })
重定向也可以是命名的路由,在routes中给每一个
const router = new VueRouter({ routes:[{ path:'/a',redirect:{name:'foo'} }] })
或者一个方法
const router = new VueRouter({ routes:[{ path:'/a',redirect:to=>{ //方法接收 目标路由 作为参数 //return 重定向 字符串路径或者路径对象 } }] })
可以用按钮式的跳转
<router-link to="/card">card</router-link>
或者js methods方式跳转
动态路由匹配
点击事件
handleClick:function(index){
//你需要router引用进来,才能进行跳转
router.push(`/card/detail/${index}`);//es6反向引号写法,
}
占位id符号: path:'/card/detail/:id',前后两个id命名要匹配,否则无法接收到id值
接收id值: {{$route.params.id}},
HTML5 history模式
vue-router默认hash模式--使用URL的hash来模拟一个完整的URL,于是当URL改变时,页面不会重新加载。
如果不想要很丑的hash模式,我们也可以用路由的history模式,这种模式充分利用history.pushState API来完成URL的跳转无须重新加载页面,
在index.js下面的router下面加入mode:'history',这样就去掉了地址栏中的#符号,
不过这种模式要玩好,还需要后台的配置支持,因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问http://oursite.com/user/id就会跳出404,这样的体验就不好了。
所以呢,你要在服务器端增加一个覆盖所有情况的候选资源:如果URL匹配不到任何的静态资源,则应该返回同一个index.html页面,这个页面就是你app依赖的页面。
Vuex
Vuex是一个专门为Vue.js应用程序开发的状态管理模式,它采用几种式存储管理应用的所有的组件状态,并以相应的规则保证状态以一种可预测的方式变化。Vuex也集成到了Vue官方调式工具devtool extension,提供了诸如零配置的time-travel调式,状态快照导入导出等高级调试功能。
虽然Vuex可以帮助我们进行管理共享状态,但也附带了更多的概念和框架,这需要对短期和长期效益进行权衡。
如果你不打算开发大型单页应用,使用Vuex可能是繁琐冗余的,一个简单的应用使用global event bus就足够需求了,
安装
npm install vuex --save
1.state:单一状态数,每个应用将仅仅包含一个store实例。
this.$store.state.状态名字
...mapState(['title'])
2.getters:可以从store中的state中派生出一些状态
1.可以认为是store的计算属性
2.this.$store.getters.计算属性名字
3. ...mapGetters(['getFilms'])
3.mutations:更改Vuex的store中的状态的唯一方法是提交
常量的涉及风格
[SOME_MUTATION](state){
// mutate state
}
必须是同步函数
this.$store.commit('type','payload')
4.actions
1.Action 提交的是mutation,而不是直接变更状态,
2.Action 可以包含任意异步操作
3.this.$store.dispatch('type','payload')
5. const store = new Vuex.Store({
state:{
count:0
},
mutations:{
increment(state,payLoad){
}
},
actions:{
}
})