vite基础学习笔记：3. 路由搭建

1 安装插件

切换至项目文件夹安装核心插件

运行pnpm i vue-router(npm install vue-router -S)

2. 路由相关设置

①在src文件夹下创建views或pages文件夹，放页面文件；在views文件夹下创建login和home两个文件夹，分别创建 index.vue，one.vue , two.vue三个页面

login/index.vue页面内容:

类似地，将one.vue , two.vue页面也写好代码（测试使用）

②在src文件夹下创建router文件夹，在其下创建index.ts文件，管理路由的一些配置项

// createRouter方法，用于创建路由器实例，可以管理多个路由
import { createRouter, createWebHistory } from 'vue-router';
export default createRouter({
    // 路由模式的设置
    history: createWebHistory(),
    // 管理路由
    routes: [
        {
            path: '/login',
            component: () => import('../pages/login/index.vue')
        },
        {
         	path: '/one',
            component: () => import('../pages/home/one.vue')
        },
        {
            path: '/two',
           component: () => import('../pages/home/two.vue')
       },
        {
            path: '/',
            redirect:'/login'
        }
],
            // 滚动行为：控制滚动条的位置
            scrollBehavior() {
                return{
                    left:0,
                    top:0
                }
            }
})     

3. main.ts中引入

import { createApp } from 'vue'
import '@/style/reset.scss'
import App from './App.vue'
//引入vue-router核心插件并安装
import router from './router';
const app = createApp(App);
//安装vue-router
app.use(router);
app.mount('#app');

注意：**app.use(router)须写在app.mount(‘#app’)**前方

4. 写好路由容器

<router-view></router-view>

在App.vue文件的模板中

最终呈现效果为: