vuecli中配置router

vuecli中配置router

1. 下载安装vue-router 包

npm i vue-router --save

2. 在src文件夹下创建 views 文件夹

views 文件夹是用来存放 页面级组件的(就是正常的页面)

2.1 在 views 文件夹下创建我们的路由组件页面

• home.vue
• about.vue

3. 在src文件夹下创建 router 文件夹

router 文件夹用来存在我们所有的路由配置文件

3.1 在 router 文件夹下创建index.js 文件，作为路由配置文件

//  index.js 文件内容
import Vue from 'vue';
import VueRouter from 'vue-router';
// 引入之前创建的路由组件
import Home from  '../views/home'

Vue.use(VueRouter);

//  定义路由, 创建路由配置项
const routes = [
    {
    
    
        //  只有首页直接渲染的
        path:'/',
        // 命名路由
        name:'Home',
        component:Home,
    },{
    
    
        //  除了首页外，其他的路由组件都是通过懒加载的形式进行渲染
        path:'/about',
        // 命名路由
        name:'About',
        component: () => import ('../views/about') ,
    }
]

//  创建路由对象
const router = new VueRouter({
    
    
    rotues
})

//  把路由对象作为模块导出
export default router;

4. 在main.js文件中引入路由模块

// 省略了index.js , 因为index.js是 默认的
import router from './router'

//  在vue实例中注入
new Vue({
    
    
    router,
    ....
}).$mount('#app')

5. 在 App.vue 文件中 添加 router-view 组件渲染路由

<div id='app'>
    <router-view></router-view>    
</div>