vue.js, vue-router creates single page application implementation code

This article mainly shares with you the code to create a single page application using vue.js and vue-router. I hope it can help you.

vue.js+vue-router creates a single-page application

1. Installation

npm install vue-router

2. Application of router

1. Monitor routing changes in subcomponents

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

Routing information object: $route (read-only and immutable, its changes can be detected through watch)

Indicates the currently activated The status information of the route includes the information obtained by parsing the current URL and the routing record matched by the URL.

Routing information objects appear in multiple places:

• In the component, this.$route is the routing information object

• The return of route.match(location) in the $route observer (watch) callback

• ## Value

Properties of the route information object

• $route.path: string. The absolute path of the current route

• $route.params: Object.

• $route.query: object. Url query parameters

• $route.fullPath: full path

• $route.matched: routing record

• $route.name: The name of the current route

3. vuex

1. Install vuex

//安装
npm install vuex --save

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

Vue.use(Vuex)

2. Create a store

Create another directory to store Vuex status

Related recommendations:

Analysis on how Vue.js operates a single page with multiple routing areas

H5 single page gesture sliding screen switching principle

Webpack, vue, node realize single page code sharing

The above is the detailed content of vue.js, vue-router creates single page application implementation code. For more information, please follow other related articles on the PHP Chinese website!