Vue3/ Vue3内 Vue-router Vue3路由 完整配置流程

一.Vue3 路由配置

(1). yarn add vue-router

(2) 创建 router/index.js 文件

(3) improt 引入 createRouter

improt { createRouter  }  from 'vue-router

(4) 调用 createRouter 并定义变量名

 cosnt router = createRouter() 

(5) export default 导出 router 

export default router 

(6) createRouter() 内添加对象 并定义 history

   history: createMemoryHistory(), //URL不显示路径

   history: createWebHistory(), //域名后面不带 # 号

   history: createWebHashHistory(), // 域名后面带 # 号

 cosnt router = createRouter({
       history: createWebHashHistory()

}) 

(7) routes内 path 配置URL显示路径 , component 导入文件

 cosnt router = createRouter({
       history: createWebHashHistory(),

    routes:[

    {path: '/自定义路径名',component: () => import('../Vue文件')  },

    {path: '/自定义路径名',component: () => import('../Vue文件')  },

  ]

}) 

(8) main.js 导入 use注册

import router from './router/index.js'

creatApp(APP).use(router).mount('#app')

(9) Vue主文件内 router-vivw 显示视图  并 router-link 内 to属性指定跳转

router-vivw 介绍: router-vivw是用来承载当前级别下的子级路由的视图标签，作用是显示当前路由内的文件

<template>

<div>

<router-link to="/path路径名"> 点我跳转 </router-link>

<router-vivw> <router-vivw>

</div>

</template>

二. router/index.js文件 完整代码