VUE3中路由的配置和简单使用

 

1、路由添加命令 ：pnpm install vue-router@next --save    //@next表示最新

 

安装成功后dependencies里会出现路由的版本 "vue-router": "^4.0.13"

如果项目正在运行，是无法安装包的，需要 ctrl+c 键关闭运行再安装。

2、使用过程中发现有中文乱码的问题，参考这个链接已成功解决：https://jingyan.baidu.com/article/49711c6179140dbb451b7c07.html

 

 

 

 

 http://127.0.0.1:5174/login   登录页路径

 

3、新建页面，设置路由

 

App.vue  这相当于主页面，每个子页面的内容和样式都在它的基础上添加

<template>
    <router-view></router-view>   <!--加上路由标签，路由才会有效果-->
</template>

main.ts 和主页面搭配的，如果这里引用了的包以及样式，子页面可以直接使用，不用再次引入

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import ElementPlus from 'element-plus'  //导入element-plus框架
import 'element-plus/dist/index.css'   //导入element-plus样式

import router from './router/index' // 导入路由
createApp(App)
    .use(ElementPlus)  //导入框架后需要加这一行使用
    .use(router)
.mount('#app')

LoginPage.vue

<template>
    <div>
        <span>这是登录页</span>
        <el-button type="danger" plain>Danger</el-button> 
    </div>
</template>

index.ts

import { createRouter, createWebHistory } from 'vue-router' //导入路由  createRouter创建路由 createWebHistory模式
import LoginPage from '../view/index/LoginPage.vue' //导入页面
const router = createRouter({
    history: createWebHistory(),
    routes: [
        { path: '/login', component: LoginPage }
    ]
});   //创建路由的方法  path：以后浏览器访问的地址  http://127.0.0.1:5174/login  component：指向的页面

export default router;  //最后导出路由表

初次接触这些，有的文字只是记录自己的想法，如有错误欢迎指正！