Vue3.0路由跳转方式

1.编程式路由导航

第一步创建route文件夹以及index.js

上代码

import { createRouter, createWebHistory } from 'vue-router'//路由数组
const routes =[{path: '/hello',name: ' hello',component: () => import('../views/HelloWorld/index.vue')},{path: '/',name: ' login',component: () => import('../views/login/index.vue')}
]
const router = createRouter({history: createWebHistory(process.env.BASE_URL),routes //上面的路由数组
})
export default router

第二步在main.js引入router

第三步在vue文件中导入

第四步开始跳转

2声明式路由导航

用< router-link>< /router-link>标签进行路由跳转

3扩展路由标签router-view的理解

路由中的 < router-view/> 是用来承载当前级别下的子级路由的一个视图标签,此标签的作用就是显示当前路由级别下一级的页面。”

在开发vue项目中经常需要实现一个页面里面可以切换着展现不同的组件页面

例如：下图中通过点击侧边栏不同的组件路由到不同的组件页，而侧边栏和顶部部分是不变的，切换的只是组件页面。

个别图片来源于网络

Vue3.0路由跳转方式相关推荐

Vue3.0路由跳转携带参数
一.路由跳转 1.在需要跳转的页面 //引入API---useRouter import { useRouter } from 'vue-router' ...... //定义router变量 con ...
前端页面路由跳转方式详解
本文总结以下几种前端页面路由的跳转方式: 第一种方式:navigate; 第二种方式:window.open; 第三种方式:document.getElementById("a标签id&qu ...
Flutter路由跳转方式
1.通过of跳转 //在入口定义路由 class MyApp extends StatelessWidget {const MyApp({super.key});@overrideWidget bui ...
vue 路由跳转方式
1.方式一:标签跳转 router-link ① 不传参 <li ><router-link to="user">点击验证动画效果 </router- ...
Vue3 实现路由跳转
一.安装 vue-router npm install vue-router@4 二.新建 vue 页面在 src 目录下新建 view 目录用来存放 vue 的页面. 然后在 view目录下新建两 ...
v-router路由跳转方式
// 字符串 router.push('home')// 对象 router.push({ path: 'home' })// 命名的路由 router.push({ name: 'user', pa ...
Vue3 路由跳转如何刷新当前页重新请求数据
Vue3 中路由跳转至当前页然后刷新页面,vue3重新跳转当前页面因为数据请求和路由跳转是异步的只需要加入 async 和await 即可
vue中实现路由跳转的三种方式（超详细整理）
vue中实现路由跳转的三种方式一.使用vue-router vue-router 本质是一个第三方的包用的时候需要下载步骤 (7步法 ): 下载vue-router模块到当前工程 yarn ad ...
学习Vue3.0，先从搭建环境开始
Bug源测试,上线来几个.愿君多修改,今夜眼难合. 这是小编关于Vue3.0系列文章的第二篇,本文将带您从零搭建一个基于Vue3.0与vite的Vue3.0开发环境,通过本文的学习,你将学习到以下内容 ...

Vue3.0路由跳转方式

Vue3.0路由跳转方式

1.编程式路由导航

第一步创建route文件夹以及index.js

上代码

第二步在main.js引入router

第三步在vue文件中导入

第四步开始跳转

2声明式路由导航

用< router-link>< /router-link>标签进行路由跳转

3扩展路由标签router-view的理解

Vue3.0路由跳转方式相关推荐

最新文章

热门文章

Vue3.0路由跳转方式

Vue3.0路由跳转方式

1.编程式路由导航

第一步创建route文件夹以及index.js

上代码

第二步在main.js引入router

第三步在vue文件中导入

第四步开始跳转

2声明式路由导航

用< router-link>< /router-link>标签进行路由跳转

3扩展 路由标签router-view的理解

Vue3.0路由跳转方式相关推荐

最新文章

热门文章

3扩展路由标签router-view的理解