安装vue-router
npm i vue-router -S
新建router.js文件(和main.js同级)
import Vue from 'vue';
import VueRouter from 'vue-router'
import Home from '@/pages/home'
Vue.use(VueRouter)
//多个路由用这个格式添加
const routes = [
{
path: "/",
component: Home
}
]
export default new VueRouter({
//去掉路由上默认的#号
mode: 'history',
routes
})
main.js文件配置
new Vue({
import router from './router'
/*
入口文件
<template>
<router-view></router-view>
</template>
*/
import Basic from '@/layouts/Basic'
new Vue({
router,
render: h => h(Basic),
}).$mount('#app')
路由懒加载的实现
安装插件
npm install --save-dev @babel/plugin-syntax-dynamic-import
如果缺失babel-plugin-component 文件则安装
npm i babel-plugin-component -S
配置babel.config.js文件
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset',
],
"plugins": [
[
"component", {
"libraryName": "mint-ui",
"style": true
},
"@babel/plugin-syntax-dynamic-import"
],
]
}
页面引入路由的形式
const Home = () => import("@/views/home")
