VUE3【学习四】router路由跳转及轻量级vant组件的安装及应用，轮播图制作

琉-璃

已于 2022-04-10 23:07:28 修改

阅读量1.3k

点赞数

分类专栏： vue vue问题解答文章标签： vscode vue.js scss sass

于 2022-04-10 23:06:35 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_42486438/article/details/124083902

版权

本文介绍了在Vue3项目中如何配置路由，包括安装vue-router、创建router文件及views文件，以及在App.vue和main.js中引入和使用。同时，详细讲解了 vant 组件库的安装，并在Home.vue页面中实现轮播图组件，将轮播图组件化以便复用。在实现过程中，还解决了路由引入报错和Sass样式引入的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、我这边scripts的运行命令是dev，所以npm run dev，打开访问http://localhost:300/就能顺利访问

二、安装路由npm i vue-router@next

在src文件夹下新建router/index.js文件和views/Home.vue文件

//router/index.js页面代码
import { createRouter, createWebHashHistory } from 'vue-router'
const router = createRouter({
    history: createWebHashHistory(), // hash模式：createWebHashHistory，history模式：createWebHistory
    routes: [
        {
            path: '/',
            redirect: '/home'
          },
          {
            path: '/home',
            name: 'home',
            component: () => import('../views/Home.vue'),
            meta: {
              index: 1
            }
          }
    ]
})

export default router