vue.js、vue-router创建单页运用实现代码

vue.js+vue-router创建单页运用

一、安装

npm install vue-router

二、router的运用

1. 在子组件中监听路由变化

export default {
  name: 'app',
  computed:mapGetters(['loading','shownav']),
  //监听路由的变化
      watch:{
        $route(to,from){
            console.log(to);
            console.log(from);
        }
      },
  components:{
    
  }
}

路由信息对象：$route（只读不可变的，可通过watch检测其变化）

表示当前激活的路由的状态信息，包含了当前url解析得到的信息以及url匹配到的路由记录

路由信息对象出现在多个地方：

• 组件内，this.$route是路由信息对象

• 在$route观察者(watch)回调内

• route.match(location)的返回值

路由信息对象的属性

• $route.path：string。当前路由的绝对路径

• $route.params：Object。

• $route.query：object。Url的查询参数

• $route.fullPath：完整路径

• $route.matched：路由记录

• $route.name：当前路由的名称

三、vuex

1. 安装vuex

//安装
npm install vuex --save

在一个模块化的打包系统中，您必须显式地通过 Vue.use() 来安装 Vuex：
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

2. 创建一个store

另外创建一个目录进行Vuex状态的存储

相关推荐：

关于Vue.js如何操作单页面多路由区域的实例分析

H5单页面手势滑屏切换原理

webpack、vue、node实现单页面代码分享

以上就是vue.js、vue-router创建单页运用实现代码的详细内容，更多请关注Gxl网其它相关文章！