1.先在终端安装

npm install vue-router --save-dev

2.在main.js中引进来

import VueRouter from 'vue-router'

3.在main.js中使用

Vue.use(VueRouter)

4.在src下新建一个 routes.js 文件

在routes.js中路由写法，一级，二级，三级的写法都有

import Home from './components/Home'
import Menu from './components/Menu'
import Login from './components/Login'
import Register from './components/Register'
import Admin from './components/Admin'
import About from './components/about/About'

//二级路由
import Contact from './components/about/Contact'
import Delivery from './components/about/Delivery'
import History from './components/about/History'
import OrderingGuide from './components/about/OrderingGuide'


//三级路由
import Phone from './components/about/contact/Phone'
import PersonName from './components/about/contact/PersonName'

export const routes=[
	{path:'/',name:"homeLink",components:{
		default:Home,
		'orderingGuide':OrderingGuide,
		'delivery':Delivery,
		'history':History
	}},
	{path:'/menu',name:"menuLink",component:Menu},
	{path:'/login',component:Login},
	{path:'/register',component:Register},
	{path:'/admin',component:Admin},
	
	{path:'/about',redirect:'/about/contact',component:About,children:[
		{path:'/about/contact',redirect:'/personname',name:"contactLink",component:Contact,children:[
			{path:'/phone',name:"phoneNumber",component:Phone},
			{path:'/personname',name:"personName",component:PersonName},
		]},
		
		{path:'/history',name:"historyLink",component:History},
		{path:'/delivery',name:"deliveryLink",component:Delivery},
		{path:'/orderingGuide',name:"orderingGuideLink",component:OrderingGuide},
	]},
	
	{path:'*',redirect:'/'}//这个路由的目的是如果在用户输入的路由在上面的路由都没有找到，就默认跳到根目录下
]

5.在main.js中引入routes文件

import Routes from './routes'

6.在main.js中创建路由

//创建路由
const router = new VueRouter({
    routes:Routes,
    mode:"history",//去掉#
})

7.在main.js中添加 router:router

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

8.在需要用的路由的页面用

<router-view></router-view>

9.在页面中用到路由，以前用a标签

<router-link to="/">博客</router-link>

至此就可以引用路由了