vue3的路由创建

Posted fengshaopu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue3的路由创建相关的知识,希望对你有一定的参考价值。

下载路由

npm install vue-router@4

在文件夹创建router文件夹

然后写入

import Home from './components/Home.vue';
import A from './components/a.vue';
import  createRouter, createWebHistory  from 'vue-router';//和vue2 路由不同
const routerHistory = createWebHistory();

const router = createRouter(
  history: routerHistory,//history写法不同
  routes: [
    
      path: '/',
      component: Home,
    ,
    
        path: '/a',
        component: A,
      ,
  ],
);

export default router;

然后在margin.js中导入

然后挂载

import  createApp  from 'vue'
import App from './App.vue'
import router from './router'
import store from './store/index'

createApp(App).use(store).use(router).mount('#app')

以上是关于vue3的路由创建的主要内容,如果未能解决你的问题,请参考以下文章

vue3的路由创建

为 vue3 中的子目录创建路由

vue3路由的配置

vue3实践---路由router

带有 Typescript 的 Vue3 路由器:缺少 RouteConfig

Vue3 如何使用 vue-router 以及路由权限拦截