Vue项目中引入全局路由router

Vue项目中引入全局路由router并可以通过浏览器路由的改变页面内容而随之改变，可分为如下几个步骤
①创建一个mainRoutes.js

import Vue from 'vue'
import Router from 'vue-router'


Vue.use(Router)
const router = new Router({
    routes:[
        {
            path:'/index',
            name:'index',
            component: ()=>import('../App.vue')
        },
        {
            path:'/search',
            name:'search',
            component: ()=>import('@/components/search/search.vue')
        },
        {
            path:'/view',
            name:'view',
            component: ()=>import('@/views/ViewIndex.vue')
        }

    ]
})
export default router

②在main.js中引入route的js文件，并进行渲染，如下代码和图所示

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

import router from '@/router/mainRoutes.js'

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

import './app.styl'

Vue.use(ElementUI)

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

③ 在app.vue（或其他文件中）添加，如下图所示。