How to use Vue-router routing

npm install vue-router --save-dev

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter);

<template>
	<div>
		<h1>Contents Page</h1>
	</div>
</template>

<script>
	export default {
		name:"Content"
	}
</script>

<template>
	<div>
		<h1>Home</h1>
	</div>
</template>

<script>
	export default {
		name:"Main"
	}
</script>

import Vue from 'vue'
//Import routing plugin import Router from 'vue-router'
//Import the components defined above import Content from '../components/Content'
import Main from '../components/Main'
//Install routing Vue.use(Router);
//Configure routing export default new Router({
	routes:[
		{
			//Route path path:'/content',
			//Route name name:'content',
			// Jump to component component:Content
			},
  {
			//Route path path:'/main',
			//Route name name:'main',
			// Jump to component component:Main
		}
	]
});

import Vue from 'vue'
import App from './App'

//Import the routing configuration directory created above import router from './router' //Automatically scan the routing configuration inside //To turn off the prompt given in production mode Vue.config.productionTip = false;

new Vue({
	el:"#app",
	//Configure routing router,
	components:{App},
	template:'<App/>'
});

<template>
	<div id="app">
		<!--
			router-link: By default, it will be rendered as an <a> tag, and the to attribute is the specified link router-view: used to render the component matched by the route -->
		<router-link to="/main">Home</router-link>
		<router-link to="/content">content</router-link>
		<router-view></router-view>
	</div>
</template>

<script>
	export default{
		name:'App'
	}
</script>

<style></style>