Vue路由与懒加载基础使用

index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../view/Home'
// import About from '../view/About'
import User from '../view/User'
/**
 * 路由设置
 * 1.vue使用路由
 * 2.创建路由实例
 * 3.在实例中添加路径与组件
 * 4.抛出路由
 */
Vue.use(VueRouter)
const router = new VueRouter({
    mode:'history',
    base: process.env.BASE_URL,
    routes:[
        {
            path:'',
            redirect:'/home'
        },
        {
            path:'/home',
            component:Home
        },
        {
            path:'/about',
            component: ()=>import('../view/About')//懒路由加载
        },
        {
            path:'/user/:userId',
            component:User
        }
    ]
})
export default router

mian.js

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

Vue.config.productionTip = false

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

App.vue

<template>
  <div id="app">
    <router-link to="/home">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-link to='/user'>User</router-link>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: 'App',
  }
</script>