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

最新推荐文章于 2024-02-27 00:00:00 发布

VIP文章青柠茶沐

最新推荐文章于 2024-02-27 00:00:00 发布

阅读量901

点赞数 1

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

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

版权

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中导入并且使用