Detailed explanation of how to use components in vue <router-view>

Preface

<router-view>is a component provided by Vue Router for dynamically displaying matching component content. In a single-page application, page switching is achieved through routing changes, and<router-view>Responsible for rendering the corresponding content based on the components matched by the current route.

Below is<router-view>Detailed explanation of some usages:

Basic use:

Use in main template<router-view>Tag, it will dynamically render the corresponding components according to the matching situation of the current route.

<template>
  <div >
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  // Other configurations of components};
</script>

Nested routing:

<router-view>It can be used in nested to support nested routing scenarios. Use multiple in parent component<router-view>Tags, each tag corresponds to a specific nested route.

<template>
  <div>
    <header>Header</header>
    <router-view></router-view>
    <footer>Footer</footer>
  </div>
</template>

Named View:

use<router-view>When tagging, you can also specify itnameproperties, thus supporting named views, which is useful when multiple views are displayed simultaneously.

<template>
  <div>
    <router-view name="header"></router-view>
    <router-view></router-view>
    <router-view name="footer"></router-view>
  </div>
</template>

In the routing configuration, the corresponding routing definition also needs to be added.componentsFields:

const routes = [
  {
    path: '/',
    components: {
      default: Home,
      header: Header,
      footer: Footer
    }
  }
];

Dynamic Components:

<router-view>It also supports rendering dynamic components. You can use it in the routing configurationcomponentField, associates components with routes.

const routes = [
  {
    path: '/dynamic',
    component: () => import('./')
  }
];

In the template:

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

Transition effect:

If you want to add a transition effect when switching routes, you can<router-view>Outer wrap<transition>Label.

<template>
  <div>
    <transition name="fade" mode="out-in">
      <router-view></router-view>
    </transition>
  </div>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

In the above example, a fading transition effect will be produced during route switching.

These are<router-view>Some basic usages and advanced features of  . In Vue Router,<router-view>It is the core component that implements dynamic routing and rendering, and it is rationally configured to route and use.<router-view>, you can build powerful and flexible single-page applications.

Attachment: vue uses router-view to call the page

In a project, you need to call many other page forms on one of the pages, so you use router to implement the page calls.

vue-router has two ways to pass parameters, get and post.

Way

Page jump

this.$({path:'/xxx',query:{id:1}});// Similar to get parameter transmission, passing parameters through URL

New page receiving parameters

this.$

Way

Page jump

 //Because dynamic routing also passes params, path cannot be used with params in this.$() method //Otherwise params will be invalid. //You need to use name to specify the page. this.$({name:'page2',params:{id:1}});//Similar to post parameters

New page receiving parameters

this.$

Note: When refreshing the page, you often encounter changes in parameters, but the parameters accepted by the new page have not changed. This problem can be solved by adding a watch.

watch: {
      '$route'(to, from){
        //Refresh it here        ();
      }
    }

Summarize

This is the article about how to use components <router-view> in vue. This is all about this article. For more related contents of using <router-view> in vue, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!