vue router Jump Page Method

When using Vue. js as a project, one page is composed of multiple components, so it is not suitable to use traditional href when jumping pages, so vue-router came into being

Please click here for official documents

## vue-router

Step 1, of course, is to install, using the npm installation command

npm install vue-router --save-dev

Step 2 Add tags to the. vue component in the following format

<div id="app">
<p>
  <!--  Use  router-link  Component to navigate . -->
  <!--  By passing in  `to`  Property specifies the main.js Alias links to file settings, such as /1 -->
  <!-- <router-link>  By default, it will be rendered as 1 A  `<a>`  Label  -->
  <router-link to="/1">Go to Foo</router-link>
</p>
<!--  Route exit  -->
<!--  Click <router-link> When the specified page will be rendered here  -->
<router-view></router-view>
</div>

Step 3 Configure the route in the main. js file in the following format

import VueRouter from 'vue-router'

// 1.  Define (route) components. 
//  Load component 
import Page01 from './max'

Vue.use(VueRouter)
// Global Installation of Routing Features 

// 2.  Define a route 
//  Each route should map 1 Components.  
const routes = [
 { path: '/1', component: Page01 } 
 // Front to A designated place  path /1
]

// 3.  Create  router  Instance, and then pass  `routes`  Configure 
const router = new VueRouter({
 routes
})

// 4.  Create and mount the root instance. 
//  Remember to pass  router  Configure parameter injection routing, 
//  So that the whole application has routing function 
new Vue({
 el: '#app',
 template: '<App/>',
 components: { App },
 router
})

//  Now, you can try to restart! 

Attention routes And router It's a different word, don't be dazzled

Routing is so simple!

props

Parent component passes values to child components

Add in the subcomponent prors The format is as follows

props: [
  'rimag',
  'hyaline',
  'levels',
  'ohyaline'
],

Then, the value is passed from the parent component to the child component in the following format

//HTML

<nv-nav :rimag=mgse :hyaline=ortiy :levels=vels :ohyaline=orctiy></nv-nav>
//  Binding for passing values 

//JS

data () {
  return {
   mgse: -20.62,
   orctiy: 0,
   vels: -1,
   ortiy: 0
  }
}

After clicking, the parent component will bind the data in data to the child component's props

$emit

The child component changes the value of the parent component, binds the event of the parent component to the child component through $on, and triggers the parent component event bound by $on through $emit in the child component

First, bind the value to the child component in the parent component and listen for the change of the child component. The format is as follows

//HTML

<nv-nav v-on:child-say="listen"></nv-nav>

//JS

listen: function (mgs, orc, cel, ort) {
 this.mgse = mgs
 this.orctiy = orc
 this.vels = cel
 this.ortiy = ort
}

Then build the value to be changed in the subcomponent data in the following format

mgs: -20.62,
orc: 0,
cel: -1,
ort: 0

Then build a method

dis: function () {
 this.$emit('child-say', this.mgs, this.orc, this.cel, this.ort)
}

Add a click event to a meta-genus to trigger the newly built method

<aside @click="dis"></aside>

It's a little messy. Welcome to correct it