从新回归Vue之3.0(五):router配置,引入element-plus
一,router配置以及使用详解
安装npm install vue-router@4
贴一个极度简单的vue页面模型
<template> </template> <script setup lang="ts"> import { ref, reactive, watch, onMounted, computed } from "vue"; import { useStore } from "vuex"; import { useRouter } from "vue-router"; // data // props // emit // methods // watch // defineExpose // 生命周期 </script> <style scoped></style>
页面具体内容:
1、layout.vue
<template> <Header/> <router-view></router-view> </template> <script setup lang="ts"> import Header from './header/index.vue'; </script>
2、header.vue
<template> <div> <h2 @click="handleClick(1)">首页</h2> <h2 @click="handleClick(0)">关于</h2> </div> </template> <script setup lang="ts"> import { useRouter } from 'vue-router'; const router = useRouter() const handleClick = (num: number)=>{ if (num) { router.push({name: 'home'}) }else router.push({name: 'about'}) } </script> <style scoped></style>
3、home.vue
<template> <h2>home</h2> </template>
4、about.vue
<template> <h2>about</h2> </template>
在src目录下创建router文件夹,然后创建index.ts文件,内容如下所示:
import { createRouter, createWebHashHistory } from "vue-router";
import LayOut from "../components/layout/index.vue";
const routes = [
{
path: '/',
component: LayOut,
redirect: '/home',
children:[
{
path: '/home',
name: 'home',
component: ()=> import("../pages/home/index.vue"),
meta:{
title: '首页',
icon: ''
}
},
{
path: '/about',
name: 'about',
component: ()=> import("../pages/about/index.vue"),
meta:{
title: '关于',
icon: ''
}
}
]
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
在main.ts中注入router模块, 重新启动项目,访问路由,看是否正确
import { createApp } from 'vue'
import App from './App.vue'
import store from './store';
import router from './router';
const app = createApp(App)
app.use(store)
app.use(router)
app.mount('#app')
二,引入element-plus以及注意事项
官方文档地址:Button 按钮 | Element Plus
安装
npm install element-plus --save
npm install @element-plus/icons
在main.ts 文件中引入配置
import { createApp } from 'vue'
import App from './App.vue'
import store from './store';
import router from './router';
// 引入ui组件
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// 全局注册图标使用
import { Edit,Search } from '@element-plus/icons'
const app = createApp(App)
app.use(store)
app.use(router)
app.use(ElementPlus);
app.component("edit", Edit)
app.component("search", Search)
app.mount('#app')
在home页面测试
<template> <h2>home</h2> <el-button type="primary" :icon="Search">Primary</el-button> <el-icon :size="20" :color="'blue'"> <edit /> </el-icon> <el-icon :size="20"> <search></search> </el-icon> </template> <script setup lang="ts"> import { ref, reactive, watch, onMounted, computed } from "vue"; import { useStore } from "vuex"; import { useRouter } from "vue-router"; import { Search } from '@element-plus/icons-vue' // data // props // emit // methods // watch // defineExpose // 生命周期 </script>