vue-cli 3.x 文档:https://cli.vuejs.org/zh/
一、选择默认的包含基本的 Babel + ESLint 设置的 preset,创建一个默认的vue项目,项目目录结构如下:
二、安装vue-router,并在项目中使用
1、安装
npm install vue-router
2、在src下创建一个文件夹router,router文件下创建一个index.js文件
src/router/index.js
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
// 引入同步组件
import login from '@views/login/login.vue';
// 引入异步组件,为实现路由懒加载
const home = () => import('@views/home/home.vue');
const router = new VueRouter({
// 路由匹配规则
routes: [
{
path: '/',
redirect: '/home' // 路由重定向
},
{
name: 'login',
path: '/login',
component: login, // 同步组件
meta: { // 路由元信息
auth: false
}
},
{
name: 'home',
path: '/home',
component: home, // home是异步组件,路由懒加载
meta: { // 路由元信息
auth: false
}
},
{
name: 'user',
path: '/user',
component: () => import('@views/system/user/user.vue'), // 异步组件,路由懒加载
meta: { // 路由元信息
auth: true
}
}
]
});
export default router;
3、在src下的main.js中导入路由对象,并挂载到Vue实例对象上。
import Vue from 'vue';
import App from './App.vue';
import router from './router/index.js'; // 导入自定义的路由模块对象
Vue.config.productionTip = false;
new Vue({
router, // 将路由对象挂载到Vue实例对象上
render: h => h(App),
}).$mount('#app');
三、路由导航守卫
四、滚动行为