vue2的路由配置

153 阅读1分钟

image.png

1、安装路由

npm install vue-router

2、创建路由配置文件

新建 router目录,然后在 router目录下新建 index.js文件

index.js 文件内容如下:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [{
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

3.在main中导入:

   import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    import store from './store'
    import axios from 'axios'
    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    import {
      Button,
      ShareSheet,
      Uploader 
    } from 'vant';
    Vue.config.productionTip = false
    Vue.use(ElementUI)
    Vue.use(Button)
    Vue.use(ShareSheet)
    Vue.use(Uploader);
    new Vue({
      router,
      store,
      axios,
      render: h => h(App)
    }).$mount('#app')
    

4.App.vue文件

<template>
  <div id="app">
    <router-view/>
  </div>
</template>