vue-cli 3.x搭建的项目中vue-router的使用

vue-cli 3.x       文档：https://cli.vuejs.org/zh/

Vue Router

Vue Router基本用法

vue-router实现Vue组件之间传参

一、选择默认的包含基本的 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');

三、路由导航守卫

四、滚动行为