Vue-router路由该如何使用

npm install vue-router --save-dev

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

Vue.use(VueRouter); 

<template>
	<div>
		<h1>内容页</h1>
	</div>
</template>

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

<template>
	<div>
		<h1>首页</h1>
	</div>
</template>

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

import Vue from'vue'
//导入路由插件
import Router from 'vue-router'
//导入上面定义的组件
import Content from '../ponents/Content'
import Main from '../ponents/Main'
//安装路由
Vue.use(Router) ;
//配置路由
export default new Router({
	routes:[
		{
			//路由路径
			path:'/content',
			//路由名称
			name:'content',
			//跳转到组件
			ponent:Content
			},
  {
			//路由路径
			path:'/main',
			//路由名称
			name:'main',
			//跳转到组件
			ponent:Main
		}
	]
});

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

//导入上面创建的路由配置目录
import router from './router'//自动扫描里面的路由配置

//来关闭生产模式下给出的提示
Vue.config.productionTip = false;

new Vue({
	el:"#app",
	//配置路由
	router,
	ponents:{App},
	template:'<App/>'
});

<template>
	<div id="app">
		<!--
			router-link默认会被渲染成一个<a>标签，to属性为指定链接
			router-view用于渲染路由匹配到的组件
		-->
		<router-link to="/main">首页</router-link>
		<router-link to="/content">内容</router-link>
		<router-view></router-view>
	</div>
</template>

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

<style></style>