vue3搭建移动端项目(5)-路由vue-router配置

最新推荐文章于 2024-05-13 14:24:16 发布

青柠茶沐

最新推荐文章于 2024-05-13 14:24:16 发布

阅读量926

点赞数 1

分类专栏： vue3移动端项目文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/weixin_40220492/article/details/126329723

版权

本文介绍了如何在Vue3项目中搭建和配置vue-router，包括安装vue-router的最新版4，创建并设置路由文件，引入并使用路由到main.js，指定app.vue中的路由挂载点，以及在首页实现路由跳转的示例。

摘要由CSDN通过智能技术生成

1.安装路由:npm install vue-router@4

2.创建路由文件,src下面

index.js 内容

import {createRouter, createWebHashHistory} from 'vue-router';
import routes from './routers';

const router = createRouter({
    history: createWebHashHistory(), 
    routes
});

export default router;

routers.js内容

const routes = [
    {
        path: "/",
        redirect:'/index'。  //指定根目录直接跳转到index,也就是首页
    },
    {
        name: 'index',
        path: '/index',
        component: () => import('../view/homePage/index.vue') //首页
    },
    {
        name: 'tabDetail',
        path: '/tabDetail',
        component: () => import('../view/tabDetail/index.vue') //详情页
    }
];

export default routes;

3.在main.js中