Vue3的使用

使用element-ui

npm i element-ui会报错，因为Vue3需要使用element-plus

vue create 项目名称
npm i element-plus -save

引入element-plus

import {createApp} from 'vue'
import App from './App'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
createApp(App).use(ElementPlus).mount('app')

路由

路由步骤

1、安装路由依赖

npm install vue-router@4

2、创建文件

First.vue

  <template>
     <div>111111</div>
  </template>

  //必须有下面这部分，否则组件不生效
  <script>
     export default{
          name:'FirsT'  //有时vue3设置严格模式,需要为小驼峰
     }
  </script>

Second.vue

  <template>
     <div>22222</div>
  </template>
  <script>
     export default{
          name:'SecOnd' 
     }
  </script>

3、设置链接及展示区

App.vue
<template>

//导航链接区域
<router-link to='first'>点击first</router-link>
<router-link to='second'>点击second</router-link>

//展示区域
<router-view></router-view>

</template>

4、创建router.js路由模块

//从vue-router引入方法
  import {createRouter,createWebHashHistory} from 'vue-router'

//导入路由
import First from './first.vue'
import Second from './second.vue'

//创建路由实例对象
const router =createRouter({
   history:createWebHashHistory(),
   routes:[
          {path:'/',      redirect:'/first'},
          {path:'/first', component:First},
          {path:'/second',component:Second}
          ]
})

//导出实例对象
export default router

5、在main.js导入并挂载路由

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'


const app=createApp(App)
app.use(router)
app.mount('#app')

或者

createApp(App).use(router).mount('#app')

二级路由

注意！！下面这种在二级路由跳一级路由会出现问题（路由残留）

组件位置

first.vue

<template>

<router-link to='/first/tab1'>Tab1按钮</router-link>
<router-link to='/first/tab1'>Tab1按钮</router-link>

<router-view></router-view>

</template>

router路由模块

import {createRouter,createWebHashHistory} from 'vue-router'

import First from './First.vue'
import Tab1 from './Tab1.vue'
import Tab2 from './Tab2.vue'

const router =createRouter({
    history : createWebHashHistory(),
    routes:[
              { path:'/first',
                component:First,
                redirect:'/first/Tab1',  //子路由重定向，需要绝对地址
                children:[
                           {path:'Tab1',component:Tab1},
                           {path:'Tab2',component:Tab2},
                         ]
              }
          ]
    })

解决方式：使用name命名路由（一级路由加name，二级正常写）

一级路由的导航链接

App.vue

<template>

    <router-link :to="{name:'firstvue'}">first按钮</router-link>
    <router-link :to="{name:'secondvue'}">second按钮</router-link>

    <router-view></router-view>

</template>

router.js

  import {createRouter,createWebHashHistory} from 'vue-router'

import First from './first.vue'
import Second from './second.vue'
import Tab from './tab.vue'

const router =createRouter({
   history:createWebHashHistory(),
   routes:[
            {path:'/first', 
             component:First,
             name:'firstvue',
             children:[{path:'tab',component:Tab}]},

            {path:'/second',component:Second,name:'secondvue'}
          ]
})

export default router