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

程序员文章站 2022-04-30 13:41:29

...

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