vue3中创建一个login页面
1.创建vue3项目2.装element插件3.创建Login页面4.router/index.js是项目入口,路由指向Longin.vue5.App.vue在路由执行某个页面的时候都要通过router-view这个组件渲染6.经过路由指向,就要有路由支持1.创建vue3项目vue create vue-admin //选择vue32.装element插件--save3.创建Login页面<
·
1.创建vue3项目
2.装element插件
3.创建Login页面
4.router/index.js是项目入口,路由指向Longin.vue
5.App.vue在路由执行某个页面的时候都要通过router-view这个组件渲染
6.经过路由指向,就要有路由支持
1.创建vue3项目
vue create vue-admin //选择vue3
2.装element插件
--save
3.创建Login页面
<template>
<div>Login</div>
</template>
<script>
export default {
name: "Login"
}
</script>
<style scoped>
</style>
4.router/index.js是项目入口,路由指向Longin.vue
import { createRouter, createWebHashHistory } from 'vue-router'
import Login from '../views/Login.vue'
const routes = [
{
path: '/',
name: 'Login',
component: Login
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
5.App.vue在路由执行某个页面的时候都要通过router-view这个组件渲染
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
6.经过路由指向,就要有路由支持
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
const app = createApp(App)
app.use(router)
app.use(ElementPlus)
app.mount('#app')
这里的
import router from './router'就是指向router/index.js
app.use(router)
从官网查到的,如果没有这个,路由不起作用
https://router.vuejs.org/installation.html#direct-download-cdn
官网是英文的,偶然遇到的
更多推荐
已为社区贡献1条内容
所有评论(0)