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');

三、路由導航守衛

四、滾動行爲