So verwenden Sie das Vue-Router-Routing

npm installiere vue-router --save-dev

Vue von „vue“ importieren
VueRouter von „vue-router“ importieren

Vue.use(VueRouter);

<Vorlage>
	<div>
		<h1>Inhaltsseite</h1>
	</div>
</Vorlage>

<Skript>
	Standard exportieren {
		Name:"Inhalt"
	}
</Skript>

<Vorlage>
	<div>
		<h1>Startseite</h1>
	</div>
</Vorlage>

<Skript>
	Standard exportieren {
		Name:"Haupt"
	}
</Skript>

Vue von „vue“ importieren
//Routing-Plugin importieren. Router von „vue-router“ importieren.
//Importieren Sie die oben definierten Komponenten. Importieren Sie Content aus '../components/Content'.
importiere Main aus '../components/Main'
//Routing installieren Vue.use(Router);
//Routing konfigurieren export default new Router({
	Routen:[
		{
			//Routenpfad Pfad:'/content',
			//Routenname name:'content',
			// Zur Komponente Komponente:Inhalt springen
			},
  {
			//Routenpfad Pfad:'/main',
			//Routenname name:'main',
			// Zur Komponente Komponente:Main springen
		}
	]
});

Vue von „vue“ importieren
App aus „./App“ importieren

//Das oben erstellte Routing-Konfigurationsverzeichnis importieren import router from './router' //Die Routing-Konfiguration darin automatisch scannen //Um die im Produktionsmodus angezeigte Eingabeaufforderung zu deaktivieren, Vue.config.productionTip = false;

neuer Vue({
	el:"#app",
	//Routing-Router konfigurieren,
	Komponenten: {App},
	Vorlage:'<App/>'
});

<Vorlage>
	<div id="app">
		<!--
			Router-Link: Standardmäßig wird es als <a>-Tag gerendert und das Attribut „to“ ist der angegebene Link. Router-View: Wird verwendet, um die Komponente darzustellen, die mit der Route übereinstimmt -->
		<router-link to="/main">Startseite</router-link>
		<router-link to="/content">Inhalt</router-link>
		<Router-Ansicht></Router-Ansicht>
	</div>
</Vorlage>

<Skript>
	Standard exportieren{
		Name:'App'
	}
</Skript>

<Stil></Stil>