vue3学习 -- 路由的基本配置

废话

vue3和vue2的语法区别还是比较大的,写习惯了vue2,去学习vue3的api会感觉比较麻烦,其实很正常,vue2在开发的时候一言就console.log(this),就像query,一言不合$,确实比较容易一些.vue3把整个语法进行了较大的改革,让使用vue的人,能使用功能更强大,组合能力更强的api.

路由基础配置

这里的路由自己暂时不做api的分析,只是先使用api把基础的的项目架子搭起来.

如果在开始用命令行创建项目的时候,就选择了router,那么就会比较轻松了,直接生成了对应的router基础配置,如果没有的话,就需要自己去简单配置一下了.

下载安装vue-router

npm i vue-router

在项目的src目录下面创建router文件夹,里面创建一个index.js或者index.ts文件

在这里我以ts举例

//引入router内部的函数方法
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'

//这里定义的公共路由,当然也可以添加一个404的路由
const globalRoutes:Array = [
  {
    path:'/login',
    name:'login',
    component:()=>import('../views/login/index.vue')
  },
  {
    path:'/',
    name:'dashboard',
    component:()=>import('../views/dashboard/index.vue')
  }
]

//权限路由,这里定义的是全量的路由,后续需要权限的匹配
const asyncRoutes:Array = [
  {
    path:'/dashboard',
    name:'dashboard',
    component:()=>import('../views/dashboard/index.vue'),
    children:[
      {
        path:'/dashboard/computed',
        name:'computed',
        component:()=>import('../views/computed/index.vue'),
         meta:{
          cname:'计算属性'
        }
      },
      {
        path:'/dashboard/ref',
        name:'ref',
        component:()=>import('../views/ref/index.vue'),
        meta:{
          cname:'ref全家桶'
        }
      },
{
        path:'/dashboard/watch',
        name:'watch',
        component:()=>import('../views/watch/index.vue'),
        meta:{
          cname:'数据监视'
        }
      }
    ]
  },
]

//将公共路由和权限路由合并,组成全量路由
const routes:Array = new Array().concat(globalRoutes).concat(asyncRoutes)

//创建路由的实例
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

//将路由实例暴露出去
export default router

在main.ts里面引入配置好的路由

import { createApp } from 'vue'
import App from './App.vue'
//引入刚才定义好的路由实例
import router from './router'
import store from './store'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

//创建vue实例
const app = createApp(App)

app.use(ElementPlus)
app.use(store)
//vue实例添加router
app.use(router)
app.mount('#app')

在App.vue中添加容器

然后在某个vue页面中,就可以使用路由了,这里简单举例,实现一个模拟菜单,可以跳转各个页面

vue-router内的api,可以在官网查询,这里不赘述,只是简单的实现vue路由的基础配置.