vue高级知识

1. 非父子组件传值方法
2. vue-router
   2.1 路由的懒加载
   进入页面时不会统一渲染所有的组件

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component:() => import('@/components/HelloWorld')
    }
  ]
})

2.1 路由跳转
使用 <router-link>

<template>
  <div id="app">
    <router-view/>
    <router-link to='/home'>home</router-link>
  </div>
</template>

编程式导航

<template>
  <div id="app">
    <router-view/>
    <router-link to='/home'>home</router-link>
    <button @click="toHome">home button</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods:{
    toHome(){ //用函数来跳转
      this.$router.push({path:'/home'})
    }
  }
}
</script>

2.2 动态路由

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component:() => import('@/components/HelloWorld')
    },
    {
      path: '/home/:id',
      name: 'Home',
      component: () => import('@/views/Home'),
    },
  ]
})

<template>
    <div>
    <h1>this is home {{$route.params.id}}</h1>
    </div>
</template>

<script>
    export default {
        name:'Home',
    }
</script>

2.3 嵌套路由
一个组件中显示另一个组件

<template>
    <div>
    this is child ~~~~
    </div>
</template>

<script>
    export default {
        name : 'Child',
    }
</script>

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component:() => import('@/components/HelloWorld')
    },
    {
      path: '/home/:id',
      name: 'Home',
      component: () => import('@/views/Home'),
      children:[{
        path:'/child',
        component: () => import('@/views/Child')
      }]
    },
  ]
})