HBuilderX vue3.X 设置路由

最新推荐文章于 2024-02-01 18:27:44 发布

龙之吻

最新推荐文章于 2024-02-01 18:27:44 发布

阅读量662

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/ltf857/article/details/130685151

版权

1 安装和导入这里不讲，自行搜索
2 新建个router.js 类
在这里插入图片描述
router.js内容

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

const routes = [
	{
        path: '/',
        name: 'Home',
        component: Home
    },
    {
		path: "/views",
		name: 'Login',
		component: Login
	}
]
const history = createWebHistory()
const routers = createRouter({
	history,
	routes:routes
})
export default routers

修改main.js内容

//入口文件

import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)

import 'element-plus/dist/index.css'
//饿了吗UI
import ElementPlus from 'element-plus'
//引入导出的路由
import router from './router/router.js'
//注册路由
app.use(ElementPlus).use(router).mount('#app')