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(或其他文件中)添加,如下图所示。
在这里插入图片描述

发布了58 篇原创文章 · 获赞 7 · 访问量 2378
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览