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

来源：百家汽车网

本文主要和大家分享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状态的存储