VUE之VueRouter页面跳转

参考资料:

参考视频

参考demo及视频资料

VUE之基本部署及VScode常用插件

VUE之基本组成和使用

VUE之Bootstrap和Element-UI的使用

VUE之axios使用,跨域问题,拦截器添加Token

Vue Router官网


Vue Router说明:

  • 说明:Vue Router用于页面跳转,以及灵活的页面嵌套,前面讲的VUE固定嵌套
  • 版本对应:vue2x对应的是vue-router3x;vue3x对应的是vue-router4x
  • 相关命令:

|--------|--------------------------------|
| 强制安装 | npm install --force vue-router |
| 安装最新版本 | npm install --vue-router |
| 卸载 | npm uninstall vue-router |
| 安装3版本 | npm i vue-router@3 |


Vue Router的使用:

1. 官方说明

  • 打开官网,点击入门,可以看到各种插件的使用方式

2. 使用方式

  • 引入插件:本人用的是vue2,所以引入vue-router@3

npm i vue-router@3

  • 在main.js 中引入

import VueRouter from 'vue-router'

import router from './router';
Vue.use(VueRouter);
router,

  • 创建跳转的页面 Test03.vue
java 复制代码
<template>
  <div><p style="color: brown;">test03 页面</p></div>
</template>

<script>
export default {

}
</script>

<style>

</style>
  • 在需要跳转,替换的地方添加 <router-view>标签,默认显示以及跳转后替换显示
  • 在src文件夹下,创建路由规则的js,如:文件夹为:router,js为index.js
javascript 复制代码
import VueRouter from 'vue-router'
// 引入组件
import Test01 from '../components/Test01'
import Test03 from '../components/Test03'
const router = new VueRouter({
    mode:"history",
    routes: [
        {
            path: "/",
            component: Test01,
            name: "test01",
        },
        {
            path: "/test01",
            component: Test01,
            name: "test01",
        },
        {
            path: "/test03",
            component: Test03,
            name: "test03",
        }
    ]
})

export default router

关于结构的分析:

  • 在默认页添加跳转按钮,并添加跳转代码
html 复制代码
        <button @click="trans">跳转至Test03页面</button>
javascript 复制代码
    trans(){
        alert("开始跳转");
        this.$router.push({
              name:"test03"
            })
    }
  • 运行 npm run serve即可进行访问

点击跳转

相关推荐
郝学胜-神的一滴17 分钟前
Cesium绘制线:从基础到高级技巧
前端·javascript·程序人生·线性代数·算法·矩阵·图形渲染
蒙奇D索大1 小时前
【计算机网络】408计算机网络高分指南:物理层编码与调制技术精讲
java·前端·学习·计算机网络
无盐海1 小时前
CSRF漏洞攻击(跨站请求伪造攻击)
前端·csrf
慧一居士1 小时前
CSS3 全部功能点介绍,使用场景,对应功能点完整使用示例
前端
烛阴1 小时前
深入Lua包(Package)与依赖管理
前端·lua
IT_陈寒1 小时前
5个Vue3性能优化技巧,让你的应用提速50% 🚀(附实测对比)
前端·人工智能·后端
god001 小时前
chromium项目中添加源文件(BUILD.gn项目中添加源文件)
java·服务器·前端
快乐非自愿2 小时前
Vue 缓存之坑,变量赋值方式和响应式数据
前端·vue.js·缓存
Github掘金计划2 小时前
别再用 “臃肿监控” 了!这款轻量监控神器开源 3 月狂揽 1.3k Star!
前端·监控
努力学习的少女2 小时前
SpaekSql函数
前端·数据库