Vue3 实现路由跳转

一、安装 vue-router

npm install vue-router@4

二、新建 vue 页面

在 src 目录下新建 view 目录用来存放 vue 的页面。

然后在 view目录下新建两个 vue 页面，分别是 login.vue 和 register.vue。

2.1 login.vue

<template><div>当前是登录页面</div>
</template><script>
export default {name: "login"
}
</script><style scoped>
</style>

2.2 register.vue

<template><div>当前是注册页面</div>
</template><script>
export default {name: "register"
}
</script><style scoped>
</style>

三、新建路由文件

在 src 目录下新建 router 目录用来存放路由配置的页面。

3.1 新建 index.js

在 router 目录下新建 index.js 配置路由。

import {createRouter, createWebHistory} from 'vue-router'
import routes from './routes'    // 导入 router 目录下的 router.jsconst router = createRouter({history: createWebHistory(process.env.BASE_URL),routes
})
export default router;

目前 routes 里面还没有路由路径等内容，因此我们要再新建一个 routes.js文件。

3.2 新建 routes.js

还是在 router 目录下新建 routes.js

import Register from '@/view/register.vue'
import Login from '@/view/login.vue'const routes = [{name: 'login',path: '/login',component: Login},{name: 'register',path: '/register',component: Register}
];
export default routes

导入刚刚新建的 vue 页面，然后和 path 绑定在一块。

四、在 App.vue 中配置路由的跳转

<template>
<div id = "app"><p><el-button><router-link to="/login">登录</router-link></el-button><el-button><router-link to="/register">注册</router-link></el-button></p><router-view/></div>
</template><script>
// App.vue 的名称叫 appexport default {name: 'app'}
</script>

注意要使用 router-link 标签来进行路由的跳转。

el-button是这边 Element UI框架的控件，如果没安装，可以不使用。

五、在 main.js 中 use 路由

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from './router/index' // 加载 router 底下的 index.js 路由配置文件const app = createApp(App)
app.use(router)
app.use(ElementPlus) // 没安装 Element UI 可以不用
app.mount('#app')

六、src 目录结构

src
│  App.vue
│  main.js
│
├─router
│      index.js
│      routes.js
│
└─viewlogin.vueregister.vue

七、结果

7.1 默认页面

7.2 点击登录

7.3 点击注册

Vue3 实现路由跳转相关推荐

Vue3.0路由跳转方式
Vue3.0路由跳转方式 1.编程式路由导航第一步创建route文件夹以及index.js 上代码 import { createRouter, createWebHistory } from 'v ...
Vue3.0路由跳转携带参数
一.路由跳转 1.在需要跳转的页面 //引入API---useRouter import { useRouter } from 'vue-router' ...... //定义router变量 con ...
Vue3 路由跳转如何刷新当前页重新请求数据
Vue3 中路由跳转至当前页然后刷新页面,vue3重新跳转当前页面因为数据请求和路由跳转是异步的只需要加入 async 和await 即可
vue3路由配置及路由跳转传参
1.安装路由 npm i vue-router 2.编写需要展示的路由在src目录下创建pages文件夹,里面创建两个vue文件命名为student.vue,person.vue 分别编写两个vue ...
VUE3页面跳转路由跳转带参路由跳转
VUE3页面跳转路由跳转带参路由跳转第一种第二种第一种跳转: import {useRouter} from "vue-router"; const router = us ...
vue3路由跳转方法
首先,vue3.0跳转和vue2.0跳转方式差别不大,但是还有需要注意的地方.这里我介绍两种比较常见的路由跳转方法. 1.利用router-link标签来进行跳转. <template> ...
Vue3（撩课学院）笔记07-vueRouter路由，创建路由，路由重定向，路由跳转，动态路由，路由懒加载，路由嵌套，路由参数穿传递的两种形式，通过事件来跳转路由
1.vueRouter路由的两种模式哈希模式:以#号分割,前端路由一般用hash模式比较多,可以兼容ie8以上,井号后面不发起请求历史模式:putstate()和replaceState()方法入 ...
Vue3中实现路由跳转的过渡动画(一)
由于VueRouter官方文档写的太过抽象,真的特别不好理解,所以我来总结一下如何去更简单地理解路由跳转时的动画. 首先看一下官方对于这个概念的解释. 在刚开始学习的时候,看到黄色框框里内容直接傻眼, ...
qiankun中使用不同版本的vue-router导致冲突(主应用vue3子应用vue2路由跳转出错)
现象描述操作步骤 1.点击子应用对应的路由(app-sub-vue2) 2.点击子应用的其他路由(About) 3.点击主应用其他路由(Home) 主应用信息 vue@^3.0.0.vue-rout ...