How to display vue without writing router

Vue is a popular JavaScript framework that can be used to build single-page applications (SPA). In Vue, routing (router) is a very important component, which can help us manage different pages of the application and provide users with a seamless navigation experience. However, there are situations where we may have to consider not using routing, and below we will introduce some solutions where routing is not applicable.

1. Use component switching

Components in Vue are a very important concept that can help us organize code and improve reusability.

If we don't use routing and want to display specific components, we can define a data variable in the Vue instance and use conditional rendering in the template to show or hide specific components. When we need to display the component corresponding to the data variable, we only need to modify the data in the Vue instance.

For example:

<div id="app">
  <button v-on:click="showComponentA = true">显示组件A</button>
  <button v-on:click="showComponentB = true">显示组件B</button>
  
  <component-a v-if="showComponentA"></component-a>
  <component-b v-if="showComponentB"></component-b>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    showComponentA: false,
    showComponentB: false
  },
  components: {
    'component-a': {
      template: '<div>组件A</div>'
    },
    'component-b': {
      template: '<div>组件B</div>'
    }
  }
})
</script>

2. Using dynamic components

In addition to using conditional rendering to directly display components, we can also use Vue's dynamic components to implement components dynamic switching.

In Vue, dynamic components mean that we only know which component to use when rendering, which is very suitable for scenarios that do not require routing. We can use Vue's built-in element to implement dynamic components.

For example:

<div id="app">
  <button v-on:click="currentView = &#39;componentA&#39;">显示组件A</button>
  <button v-on:click="currentView = &#39;componentB&#39;">显示组件B</button>
  
  <component v-bind:is="currentView"></component>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    currentView: 'componentA'
  },
  components: {
    'componentA': {
      template: '<div>组件A</div>'
    },
    'componentB': {
      template: '<div>组件B</div>'
    }
  }
})
</script>

3. Display content without using components

If your application does not require components, you can directly use Vue’s template syntax to display content . Vue's template syntax is very concise and easy to understand.

For example:

<div id="app">
  <p v-if="showMessage">{{ message }}</p>
  <p v-else>{{ alternateMessage }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    showMessage: true,
    message: 'Hello, Vue!',
    alternateMessage: 'Alternate Message'
  }
})
</script>

Summary:

Although Vue's routing function is very powerful, in some application scenarios, we do not need to use it. In this case, we can use Vue's dynamic components, conditional rendering or even direct template syntax to achieve our needs. Mastering these skills allows us to use the Vue framework more flexibly and improve our development efficiency.

The above is the detailed content of How to display vue without writing router. For more information, please follow other related articles on the PHP Chinese website!