vue3配置router路由并实现页面跳转功能

目录
  • 1、安装vue-router
  • 2、根目录下新建router文件夹，下面新建index.js文件和routes.js
    • 2.1文件中引入vue方法、配置页面具体路径
  • 3、main.js文件中引入路由
  • 4、APP.vue里声明路由的占位符<router-view></router-view>
  • 5、测试
  • 6、文件代码

1、安装vue-router

用vue3需要安装版本4.0以上的vue-router，安装命令：

npm install vue-router@next --save

vue2尽量安装4.0以下版本，安装命令：

npm i vue-router@3.1.3

在package.json中可以查看vue-router版本号：

2、根目录下新建router文件夹，下面新建index.js文件和routes.js

2.1文件中引入vue方法、配置页面具体路径

vue2和vue3代码区别如下：
【vue3】

ps：引入文件时记得新建view文件夹以及里面的A、B.vue两个页面

【vue2】

3、main.js文件中引入路由

4、APP.vue里声明路由的占位符<router-view></router-view>

5、测试

6、文件代码

HelloWorld.vue

<template>
  <!-- <h1>{{ msg }}</h1> -->
  <div class="card">
    <router-link to="/A">A</router-link>&nbsp;
    <router-link to="/B">B</router-link>&nbsp;

    <!-- 第二种方法 router.push-->
    <!-- <button @click="show('a')">A页面</button>
    <button @click="show('b')">B页面</button> -->
  </div>
</template>

<script setup>
import {useRouter,useRoute} from 'vue-router'
//const router = useRouter()
//const route = useRoute()

// defineProps({
//   msg: String,
// })

// 第二种跳转方法
// const show=(index)=> {
//   if(index == 'a') {
//     router.push('/a')
//   }
//   if(index == 'b') {
//     router.push('/b')
//   }
// }
</script>

<style scoped></style>

index.js

import {createRouter, createWebHashHistory,createWebHistory} from 'vue-router'
import routes from './routes'

const router = createRouter({
	routes,
    history: createWebHashHistory()
})

export default router

routes.js

const a = () => import('../view/A.vue')
const b = () => import('../view/B.vue')

const routes = [
	//实现路由重定向，当进入网页时，路由自动跳转到/a路由
	//{
	//	path:'/',
    //    redirect:'/a'
    // },

    {
        path: '/',
        component:a,
    },
    {
        name: 'a',
        path: '/a',
        component:a
    },
    {
        name: 'b',
        path: '/b',
        component: b
    },

];

export default routes

APP.vue

<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <div>
    <h1>App 组件</h1>
    <HelloWorld msg="hello" />
    <!-- 声明路由的占位符 -->
    <router-view></router-view>
  </div>
</template>

<style scoped>

</style>

补充：
编程式导航
通过调用 API 实现导航的方式，叫做编程式导航。
与之对应的，通过点击链接实现导航的方式，叫做声明式导航。例如：
1. 普通网页中点击 链接、vue 项目中点击 都属于声明式导航
2. 普通网页中调用 location.href 跳转到新页面的方式，属于编程式导航

vue-router 中的编程式导航 API
vue-router 提供了许多编程式导航的 API，其中最常用的两个 API 分别是：

this.$router.push('hash 地址')  跳转到指定 Hash 地址，从而展示对应的组件
this.$router.go(数值 n)  实现导航历史的前进、后退
history.go(-2);//后退两次
history.go(2);//前进两次
history.back(); //后退
hsitory.forward(); //前进

但是history也是有缺点的，不怕前进后退跳转，就怕刷新（如果后端没有准备的话），因为刷新是实实在在地去请求服务器了。

到此这篇关于vue3配置router路由并实现页面跳转的文章就介绍到这了,更多相关vue3页面跳转内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue3路由新玩法useRoute和useRouter详解

    目录 我们通过useRouter来手动控制路由变化 通过useRouter传参的三种方式 隐式传参params 显式传参query 动态路由传参 useRouter 的push和replace 原来的vue2路由是通过this.$route和this.$router来控制的.现在vue3有所变化,useRoute相当于以前的this.$route,而useRouter相当于this.$router 我们通过useRouter来手动控制路由变化 import { useRouter } from

  • vue3中使用router路由实现跳转传参的方法

    目录 前言 一.路由跳转 二.页面传参需要注意 总结 大家好,今天和大家分享一下vue3中如何进行跳转并进行传参. 前言 vue3取消了vue2部分api,所以路由跳转和传值的方式会有所不同.我们今天主要讲router.push(location, onComplete?, onAbort?)vue3中新增API:useRouter和useRoute 一.路由跳转 1.首先在需要跳转的页面引入API—useRouter import { useRouter } from 'vue-router'

  • vue3中router路由以及vuex的store使用解析

    目录 vue3 router路由及vuex store使用 1.路由 2.vuex vue3中router路由和vuex的store使用,获取对象基本使用 vue3中router和store使用方法 1.企业开发Router全局配置 2.企业开发Store全局配置 功能快捷键 vue3 router路由及vuex store使用 1.路由 <script> import { useRouter, useRoute } from 'vue-router' export default {   s

  • Vue3如何根据搜索框内容跳转至本页面指定位置

    目录 需求 思路 实现过程 补充内容 总结 需求 需求:根据搜索框内容跳转至本页面指定位置 搜索框是我们在开发各类项目中出现率很高的一个"组件",在element-plus中名为"自动补全输入框",即我们可以根据输入的内容去检索列表或者表格或者其他本页面出现的元素,那我们应该如何去实现这个行为呢? 思路 整体过程是这样的: 点击输入框的内容,页面跳转至指定的内容位置 实现过程 ①首先我们必须要在页面中引入自动补全输入框组件 template部分 <el-aut

  • Vue3使用vue-router如何实现路由跳转与参数获取

    目录 vue-router实现路由跳转与参数获取 路由跳转和传参 路由跳转三种方法的总结 一.第一种 二.第二种 三.第三种 vue-router实现路由跳转与参数获取 路由跳转和传参 import { defineComponent, onMounted, reactive, readonly, ref } from 'vue'; import { useRouter, useRoute } from 'vue-router'; export default defineComponent({

  • 关于Vue3路由push跳转问题(解决Vue2this.$router.push失效）

    关于Vue3路由push跳转问题(解决Vue2this.$router.push失效）

    目录 1.Vue3.x路由跳转 2.获取参数 3. router-link 4.总结 Vue3.x出来有一阵子了,今天用它的时候发现Vue2中的this.$router.push竟然不能用了!!!!!,真是服了,还得花点时间瞅瞅咋回事,所以.....还是总结下吧 1.Vue3.x路由跳转 不要this了,直接引用路由对象,看下图: import router from '@/router/index.js' 用这个路由对象router去push(剩下的和Vue2.x一样) router.push

  • vue3配置router路由并实现页面跳转功能

    目录 1.安装vue-router 2.根目录下新建router文件夹,下面新建index.js文件和routes.js 2.1文件中引入vue方法.配置页面具体路径 3.main.js文件中引入路由 4.APP.vue里声明路由的占位符<router-view></router-view> 5.测试 6.文件代码 1.安装vue-router 用vue3需要安装版本4.0以上的vue-router,安装命令: npm install vue-router@next --save

  • vue路由拦截及页面跳转的设置方法

    路由设置:router/index.js export default new Router({ routes: [ { path: '/selfcenter', name: 'selfcenter', meta: { requireAuth: true // 配置此条,进入页面前判断是否需要登陆 }, component: selfcenter } ] }) main.js: /* eslint-disable no-new */ router.beforeEach((to, from, ne

  • Vue this.$router.push(参数)实现页面跳转操作

    很多情况下,我们在执行点击按钮跳转页面之前还会执行一系列方法,这时可以使用 this.$router.push(location) 来修改 url,完成跳转. push 后面可以是对象,也可以是字符串: // 字符串 this.$router.push('/home/first') // 对象 this.$router.push({ path: '/home/first' }) // 命名的路由 this.$router.push({ name: 'home', params: { userId

  • vue3中addRoute路由变化但页面未更新问题解决

    目录 按着vue2的写法写vue3 发现路由变化了但页面没有更新 搜索了半天没有解决办法. 想了半天觉得是重复用同一个对象,vue为了节约性能就没有新建, 被vue3给优化了 解决办法,每次addRoute时 深复制组件对象 import time from "../views/time" function copyObj(obj) { if (typeof obj == "object") { if (Array.isArray(obj)) { let arr =

  • JavaScript实现定时页面跳转功能示例

    本文实例讲述了JavaScript实现定时页面跳转功能.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &l

  • require.js与bootstrap结合实现简单的页面登录和页面跳转功能

    require.js与bootstrap结合实现简单的页面登录和页面跳转功能

    小颖的这个demo其实很简单的,大家一起来先来看看页面效果图: 目录: 代码: inde.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>require.j

  • Android编程中Intent实现页面跳转功能详解

    本文实例讲述了Android编程中Intent实现页面跳转功能.分享给大家供大家参考,具体如下: 安卓四大组件:Activity.Service.Broadcast Receiver.Content Provider Intent实现页面之间跳转 1.无返回值 startActivity(intent) 2.有返回值 startActivityForResult(intent,requestCode); onActivityResult(int requestCode,int resultCod

  • 微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法

    微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法

    本文实例讲述了微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法.分享给大家供大家参考,具体如下: 很多项目都会有消息记录页,即列表页,紧接着就是点击列表的某一项进入到消息的详情页,这里承接上一篇文章,继续分享如何从列表的item项跳转到下一个页面. 一.效果图 从左边的列表页调到右边的详情页 二.页面之间的跳转 首先要看的是页面的跳转,微信小程序有三种跳转方式可供选择: 1.保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面. wx.navi

  • 微信小程序实现点击文字页面跳转功能【附源码下载】

    本文实例讲述了微信小程序实现点击文字页面跳转功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.js文件 Page({ data:{ // text:"这是一个页面" }, onLoad:function(options){ // 页面初始化 options为页面跳转所带来的参数 }, onReady:function(){ // 页面渲染完成 }, onShow:function(){ // 页面显示 }, onHide:function(){ // 页面

随机推荐