Vue3 + Vite + Ts:路由 vue-router 的基本使用

目录

一、在 src 下新建一个文件夹 router ，接着新建一个文件 index.ts

二、引入

---

一、在 src 下新建一个文件夹 router ，接着新建一个文件 index.ts

 加入下面代码

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
// import Home from '../views/Home.vue'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Login',
    component: () => import('../views/User/Login.vue')
  },
  {
    path: '/Register',
    name: 'Register',
    component: () => import('../views/User/Register.vue')
  },
  {
    path: '/mian',
    name: 'Layout',
    component: () => import('../views/Layout/index.vue'),
    children: [
      {
        path: 'Home',
        name: 'Home',
        meta: {
          title:'首页',
          isSub: false
        },
        component: () => import('../views/Home/index.vue')
      },
    ]
  },
  
 
] 

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

export default router

二、引入

1、在入口文件中引入

 在文件中加入下面代码，注意代码 createApp(App) 时先赋给一个变量的

import router from './router'

const vue = createApp(App)
vue.use(router)

2、在组件中使用：

引入

import { useRouter } from "vue-router";

在使用之前先声明一个变量

const Router = useRouter();

跳转页面：

const toR = (path = "/Register") => {
  Router.push({ path: path });
};