首先在搭建的工程中安装，并保存在package.json文件中，必须添加--save。 npm install vue-router --save
router文件夹里面index.js、router.js
1、生成路由
在index.js文件中引入路由，生成路由
1 import Vue from ‘vue‘ 2 import VueRouter from ‘vue-router‘ 3 4 Vue.use(VueRouter) 5 //生成路由器 6 const router = new VueRouter() 7 8 export default router
2、安装路由到当前应用，在main.js文件
new Vue({router})
main.js文件
1 import Vue from ‘vue‘ 2 import ‘lib-flexible/flexible‘ 3 import router form ‘./router 4 import App from ‘./App.vue‘ 5 6 Vue.config.productionTip = false 7 8 new Vue({ 9 el:‘#app, 10 compontents:{APP}, 11 template:‘<APP/>, 12 router 13 })
3、管理路由
new VueRouter({routes},routes = [{path:‘路由路径‘,compontent:‘路由组件‘}]
routes.js文件
1 //引入组件 2 import Login from ‘@/view/login/index‘ 3 import Msite from ‘@/view/msite/index‘ 4 export default [ 5 //{path:‘路由路径‘,component:‘路由组件‘} 6 { 7 path:‘/login‘, 8 component:Login 9 }, 10 { 11 path:‘/msite‘, 12 component:Msite 13 }, 14 ]
路由重定向
1 import Login from ‘@/view/login/index‘ 2 import Msite from ‘@/view/msite/index‘ 3 4 export const defalutRouter = [ 5 { 6 path:‘/login‘, 7 component:Login 8 }, 9 { 10 path:‘/msite‘, 11 component:Msite 12 }, 13 { 14 path:‘/‘, 15 rediret:‘/login‘ 16 }, 17 ]
4、请求路由
路由链接router-link to = ‘路由路径‘
引入路由，将路由对象配置
index.js文件
1 import Vue from ‘vue‘ 2 import VueRouter from ‘vue-router‘ 3 import routes from ‘./routes‘ 4 5 Vue.use(VueRouter) 6 //生成路由器 7 const router = new VueRouter( 8 {routes} 9 ) 10 11 export default router
5、显示路由组件 APP.vue文件里面添加 <router-view></router-view>
原文：https://www.cnblogs.com/qing0228/p/14371751.html