Vue项目中引入全局路由router

超、凢脫俗 2023-06-27 03:12 9阅读 0赞

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')

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70]

③ 在app.vue（或其他文件中）添加，如下图所示。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200102134803865.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200102134949639.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ==,size_16,color_FFFFFF,t_70