Vue路由和Vuex

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:{

}

})

猜你喜欢