HBuilderX vue3.X 设置路由

1 安装和导入这里不讲,自行搜索
2 新建个router.js 类
HBuilderX vue3.X 设置路由_第1张图片
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')


你可能感兴趣的:(vue.js,javascript,前端)