Issues in Vue to implement naming views through vue-router

When using vue-router routing to handle some requirements, for example, sometimesAt the same levelShow multiple components instead of nested
For example: Create a layout with two views: Side navigation and main content. Named views come in handy.

Use in routing objectscomponentsProperties to make it mountable in a pathMultipleSubcomponents:
Then you can specify a name for each component to be displayed
defaultname isdefaultThat is, no name is set

<script>
 var header={
  template:"<h1>Head</h1>"
 }
 var leftBox={
  template:"<h1>Left sidebar</h1>"
 }
 var mainBox={
  template:"<h1>subject</h1>"
 }

 // Create a routing object var router=new VueRouter({
  routes:[
   // Use the components property to mount multiple subcomponents in one path   {path:"/",components:{
    // The default displayed component    "default":header,
    // Name the component    "left":leftBox,
    "main":mainBox
   }}
  ]
 })

 var vm=new Vue({
  el:'#app',
  data:{},
  methods:{},
  // Mount the routing object  router
 });
&lt;/script&gt;

Then use it in the page<router-view>Tags for display on tagsSpecify name
If name is specified, then<router-view>Only components with specified name can be placed

<div >
	<!-- Not specifiedname Use default(default)Components of -->
	<router-view></router-view>
	<!-- for<router-view>Specifyname Should<router-view>只能放SpecifynameComponents of -->
	<router-view name="left"></router-view>
	<router-view name="main"></router-view>
</div>

ps: The following is the principle of vue-router

Update the view but not re-requesting the page is one of the core of the front-end routing principleCurrently, this function is mainly implemented in the browser environment.2 ways, Hash mode and History mode:

(1) Use hash("#");

(2) New methods added in HTML5 using History interface;

1. Hash mode:

hash(#) is the anchor point of the URL, representing a location in the web page. The browser will only scroll to the corresponding location just after changing the # part and will not reload the web page. In other words, # is used to guide the browser's actions and is completely useless to the server side. # will not be included in the HTTP request. At the same time, every time the # part is changed, a record will be added to the browser's access history. Use the "back" button to return to the previous location;

2. History mode:

The HTML5 History API provides a function that allows developers to modify the URL of the site without refreshing the entire page, which is to use the API to complete the URL jump without reloading the page;

Usually, we choose to use History mode because the URL with "#" in Hash mode will look unsightly; but in fact, if you choose this accidentally, you will also have problems; for example:

But when the user directly enters the address in the user column and contains parameters:
Hash mode: /#/id=5 The request address is , no problem;
History mode: /id=5 The request address is /id=5. If the backend does not have a corresponding routing processing, it will return a 404 error;

To solve this problem, the method provided by vue-router is:

Add a candidate resource to the server that covers all situations: if the URL does not match any static resources, the same page should be returned, which is the page your app depends on.

Give a warning, because after doing so, your server will no longer return the 404 error page, because files will be returned for all paths. To avoid this, you should cover all routing situations in the Vue app and then give a 404 page. Alternatively, if you use a server, you can use the server route to match the incoming URL and return a 404 when no route is matched to achieve a fallback.

This is the end of this article about implementing naming views through vue-router in Vue. For more related content of vue vue-router naming views, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!