vue3里面添加router, 本文这里面的主体环境为vue3, 在ts里面添加router,并且调试为history模式。

1、安装依赖包

npm install vue-router@4

这里面需要确定一下,vue3里面还是必须使用router4以上的版本,否则支持不是很友好。

2、 创建并且添加路由文件

创建router文件,在目录下面创建一个路由的index.ts,这里我创建在了/src/router/indec.ts下面,配置如下:

/**
  ts版本的路由
  2022年2月28日21:00:46
  CL
 */

import { createRouter, createWebHashHistory, createWebHistory, RouteRecordRaw } from 'vue-router'

import login from '@/views/login/index.vue'    // 自定义的 登录页
import LoginOut from '@/views/login/loginOut.vue'  // 自定义的登出页

/**
 * 定义路由模块
 * 2022年2月28日21:41:54
 * CL
 */
const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Login',
    component: login
  },
  {
    path: '/LoginOut',
    name: 'LoginOut',
    component: LoginOut
  }
]

/**
 * 定义返回模块
 */
const router = createRouter({
  history: createWebHistory('/abc/'),  // 设置为history模式,就是路径里面没有#,  createWebHashHistory 是默认的,括号里面的就是基础路径,可以理解为项目名称,就是请求路径的基础url
  routes
})

export default router

3、在main.ts里面引入router

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'   // 引入router
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

createApp(App).use(router).use(Antd).mount('#app')  // 添加router使用

4、在app.vue里面添加路由组件

<template>
  <router-view></router-view>  // 添加路由组件
</template>

5、填坑

    4版本的路由跟之前的有点不同,在配置history的时候,耽误点了时间,怪自己没有好好看,后来查看官网才看到,

createWebHashHistory: hasb版本的路由,就是路径里面含有#

createWebHistory: history的路由,路径里面不含有#

两个我只注意到了后面,都是history,所以一直拷贝的第一个,就导致录用一直带#好纠结。

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐