Vue兩種組件類型:遞歸組件和動態(tài)組件的用法

// 遞歸組件 recursive.vue
<template>
 <div>
 <p>遞歸組件</p>
 <Recursion :count="count + 1" v-if="count < 3"></Recursion>
 </div>
</template>

<script>
 export default {
 name: "Recursion",//必須設置name屬性
 props: {
  count: {
  type: Number,
  default: 1
  }
 }
 }
</script>

// parentComponent.vue
<template>
 <div>
 <h2>父組件</h2>
 <component :is="currentView"></component>
 <button @click = "changeToViewB">切換到B視圖</button>
 </div>
</template>

<script>
 import ComponentA from '@/components/ComponentA'
 import ComponentB from '@/components/ComponentB'
 export default {
 components: {
  ComponentA,
  ComponentB
 },
 data() {
  return {
  currentView: ComponentA // 默認顯示組件 A
  }
 },
 methods: {
  changeToViewB () {
  this.currentView = ComponentB // 切換到組件 B
  }
 }
 }
</script>

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
import UserInfo from ".././userInfo.vue";
import ChangeCommunity from ".././ChangeCommunity.vue";

var vueRouter= new Router({
routes: [
 {
 path: '/',
 name: 'UserInfo',
  component: UserInfo,
  meta: {
   title: '我的信息'
  }
  },
  {
   path: '/ChangeCommunity',
   name: 'ChangeCommunity',
   component: ChangeCommunity,
   meta: {
   title: '我的社區(qū)'
   }
  },
 
]
})
vueRouter.beforeEach((to, from, next) => {
/* 路由發(fā)生變化修改頁面title */
if (to.meta.title) {
document.title = to.meta.title;
}
next();
})
export default vueRouter

 {
   path: '/ChangeCommunity',
   name: 'ChangeCommunity',
   component: ChangeCommunity,
   resolve
 },

 {
   path: '/ChangeCommunity',
   name: 'ChangeCommunity',
   component: resolve=>require(['ChangeCommunity'],resolve)
 },

　const router = new VueRouter({
 routes: [...],
 scrollBehavior (to, from, savedPosition) {

　 if (savedPosition) {
 　　 return savedPosition//滾動到指定位置
 　　 } else {
 　　return { x: 0, y: 0 }
 　　 }
 } })
“滾動到錨點”的行為：
scrollBehavior (to, from, savedPosition) {
 if (to.hash) {
 return {
  selector: to.hash
 }
 }
}
異步滾動
scrollBehavior (to, from, savedPosition) {
 return new Promise((resolve, reject) => {
 setTimeout(() => {
  resolve({ x: 0, y: 0 })
 }, 500)
 })
}