Vue.js 3.0 学习笔记（十一）Vue Router路由
2024-06-03 17:34:34
一、使用Vue Router
1、HTML页面使用路由
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>在HTML页面中使用路由</title>
</head>
<body>
<style>#app{text-align: center;}.container {background-color: #73ffd6;margin-top: 20px;height: 100px;}</style>
<div id="app"><router-link to="/home">首页</router-link><router-link to="/list" custom v-slot="{navigate}"><button @click="navigate" @keypress.enter="navigate"> 古诗欣赏</button></router-link><router-link to="/about" >联系我们</router-link><div class="container"><router-view ></router-view></div>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<!--引入Vue Router-->
<script src="https://unpkg.com/vue-router@next"></script>
<script>const home={template:'<div>主页内容</div>'};const list={template:'<div>我不践斯境，岁月好已积。晨夕看山川，事事悉如昔。</p></div>'};const about={template:'<div>需要技术支持请联系作者微信codehome6</div>'};const routes=[{path:'/home',component:home},{path:'/list',component:list},{path:'/about',component:about},];const router= VueRouter.createRouter({//提供要实现的history实现。为了方便起见，这里使用hash historyhistory:VueRouter.createWebHashHistory(),routes//简写，相当于routes：routes});const vm= Vue.createApp({});//使用路由器实例，从而让整个应用都有路由功能vm.use(router);vm.mount('#app');
</script>
</body>
</html>2、嵌套路由
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>嵌套路由</title>
<style>#app{text-align: center;}.container {background-color: #73ffd6;margin-top: 20px;height: 100px;}</style>
</head>
<body>
<div id="app"><!-- 通过 router-link 标签来生成导航链接 --><router-link to="/home">首页</router-link><router-link to="/list" custom v-slot="{navigate}"><button @click="navigate" @keypress.enter="navigate"> 古诗欣赏</button></router-link><router-link to="/about">关于我们</router-link><div class="container"><!-- 将选中的路由渲染到 router-view 下--><router-view></router-view></div>
</div>
<template id="tmpl"><div><h3>列表内容</h3><!-- 生成嵌套子路由地址 --><router-link to="/list/poetry1">古诗1</router-link><router-link to="/list/poetry2">古诗2</router-link><div class="sty"><!-- 生成嵌套子路由渲染节点 --><router-view></router-view></div></div>
</template>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<!--引入Vue Router-->
<script src="https://unpkg.com/vue-router@next"></script>
<script>const home={template:'<div>主页内容</div>'};const list={template:'#tmpl'};const about={template:'<div>需要技术支持请联系作者微信codehome6</div>'};const poetry1 = {template: '<div> 红颜弃轩冕，白首卧松云。</div>'};const poetry2 = {template: '<div>为问门前客，今朝几个来。</div>'};// 2.定义路由信息const routes = [// 路由重定向：当路径为/时，重定向到/list路径{path: '/',redirect: '/list'},{path: '/home',component: home,},{path: '/list',component: list,//嵌套路由children: [{path: 'poetry1',component: poetry1},{path: 'poetry2',component: poetry2},]},{path: '/about',component:about,}];const router= VueRouter.createRouter({//提供要实现的history实现。为了方便起见，这里使用hash historyhistory:VueRouter.createWebHashHistory(),routes //简写，相当于routes：routes});const vm= Vue.createApp({});//使用路由器实例，从而让整个应用都有路由功能vm.use(router);vm.mount('#app');
</script>
</body>
</html>二、命名路由
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>命名路由</title>
</head>
<body>
<style>#app{text-align: center;}.container {background-color: #73ffd6;margin-top: 20px;height: 100px;}</style>
<div id="app"><router-link :to="{name:'router1'}">首页</router-link><router-link to="/list" custom v-slot="{navigate}"><button @click="navigate" @keypress.enter="navigate"> 古诗欣赏</button></router-link><router-link :to="{name:'router3'}" >联系我们</router-link><!—路由匹配到的组件将在这里渲染 --><div class="container"><router-view ></router-view></div>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<!--引入Vue Router-->
<script src="https://unpkg.com/vue-router@next"></script>
<script>//定义路由组件const home={template:'<div>home组件的内容</div>'};const list={template:'<div>红颜弃轩冕，白首卧松云。</div>'};const details={template:'<div>需要技术支持请联系作者微信codehome6</div>'};const routes=[{path:'/home',component:home,name: 'router1',},{path:'/list',component:list,name: 'router2',},{path:'/details',component:details,name: 'router3',},];const router= VueRouter.createRouter({//提供要实现的history实现。为了方便起见，这里使用hash historyhistory:VueRouter.createWebHashHistory(),routes//简写，相当于routes：routes});const vm= Vue.createApp({});//使用路由器实例，从而让整个应用都有路由功能vm.use(router);vm.mount('#app');
</script>
</body>
</html>还可以使用params属性设置参数
或者router.push()
三、命名视图
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>命名路由</title>
</head>
<body>
<style>.style1{height: 20vh;background: #0BB20C;color: white;}.style2{background: #9e8158;float: left;width: 30%;height: 70vh;color: white;}.style3{background: #2d309e;float: left;width: 70%;height: 70vh;color: white;}</style>
<div id="app"><div class="style1"><router-view></router-view></div><div class="container"><div class="style2"><router-view name="sidebar"></router-view></div><div class="style3"><router-view name="main"></router-view></div></div>
</div>
<template id="sidebar"><div class="sidebar">侧边栏导航内容</div>
</template>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<!--引入Vue Router-->
<script src="https://unpkg.com/vue-router@next"></script>
<script>// 1.定义路由跳转的组件模板const header = {template: '<div class="header"> 头部内容 </div>'}const sidebar = {template: '#sidebar'}const main = {template: '<div class="main">正文部分</div>'}// 2.定义路由信息const routes = [{//不能分开定义path为'/'path: '/',components: {default: header,sidebar: sidebar,main: main}}];const router= VueRouter.createRouter({//提供要实现的history实现。为了方便起见，这里使用hash historyhistory:VueRouter.createWebHashHistory(),routes //简写，相当于routes：routes});const vm= Vue.createApp({});//使用路由器实例，从而让整个应用都有路由功能vm.use(router);vm.mount('#app');
</script>
</body>
</html>
四、路由传参
param传参
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>param传参</title>
</head>
<body>
<style>.style1{background: #0BB20C;color: white;padding: 15px;margin: 15px 0;}.main{padding: 10px;}</style>
<body>
<div id="app"><div><div class="style1"><router-view></router-view></div></div><div class="main"><router-view name="main"></router-view></div>
</div>
<template id="sidebar"><div><ul><router-link v-for="(item,index) in menu" :key="index" :to="item.url" tag="li">{{item.name}}</router-link></ul></div>
</template><template id="main"><div><router-view></router-view></div>
</template>
<template id="form"><div><form><div><label for="exampleInputEmail1">邮箱</label><input type="email" id="exampleInputEmail1" placeholder="输入电子邮件" v-model="email"></div><div><label for="exampleInputPassword1">密码</label><input type="password" id="exampleInputPassword1" placeholder="输入密码" v-model="password"></div><button type="submit" @click="submit">提交</button></form></div>
</template>
<template id="info"><div><div>输入的信息</div><div><blockquote><p>邮箱：{{ $route.params.email }} </p><p>密码：{{ $route.params.password }}</p></blockquote></div></div>
</template>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<!--引入Vue Router-->
<script src="https://unpkg.com/vue-router@next"></script>
<script>// 1.定义路由跳转的组件模板const header = {template: '<div class="header">头部</div>'}const sidebar = {template: '#sidebar',data:function() {return {menu: [{displayName: 'Form',routeName: 'form'}, {displayName: 'Info',routeName: 'info'}]}},}const main = {template: '#main'}const form = {template: '#form',data:function() {return {email: '',password: ''}},methods: {submit:function() {// 方式1this.$router.push({name: 'info',params: {email: this.email,password: this.password}})}},}const info = {template: '#info'}// 2.定义路由信息const routes = [{path: '/',components: {default: header,sidebar: sidebar,main: main},children: [{path: '',redirect: 'form'}, {path: 'form',name: 'form',component: form}, {path: 'info/:email/:password',name: 'info',component: info}]}];const router= VueRouter.createRouter({//提供要实现的history实现。为了方便起见，这里使用hash historyhistory:VueRouter.createWebHashHistory(),routes //简写，相当于routes：routes});const vm= Vue.createApp({data(){ return{}},methods:{},});//使用路由器实例，从而让整个应用都有路由功能vm.use(router);vm.mount('#app');
</script>
</body>
</html>五、编程式导航
- push方法：添加history记录
- go方法：前进或后退多少步
- replace方法：不会向history添加记录，而是替换当前记录
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>实现路由间的切换</title>
</head>
<body>
<style>.style1{background: #0BB20C;color: white;height: 100px;}
</style>
<body>
<div id="app"><div class="main"><div ><button @click="next">前进</button><button @click="goFirst">第1页</button><button @click="goSecond">第2页</button><button @click="goThird">第3页</button><button @click="goFourth">第4页</button><button @click="pre">后退</button><button @click="replace">替换当前页为特殊页</button></div><div class="style1"><router-view></router-view></div></div>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<!--引入Vue Router-->
<script src="https://unpkg.com/vue-router@next"></script>
<script>const first = {template: '<h3>花时同醉破春愁，醉折花枝作酒筹。</h3>'};;const second = {template: '<h3>忽忆故人天际去，计程今日到梁州。</h3>'};const third = {template: '<h3>圭峰霁色新，送此草堂人。</h3>'};const fourth = {template: '<h3>终有烟霞约，天台作近邻。</h3>'};const special = {template: '<h3>特殊页面的内容</h3>'};// 2.定义路由信息const routes = [{path: '/first',component: first},{path: '/second',component: second},{path: '/third',component: third},{path: '/fourth',component: fourth},{path: '/special',component: special}];const router= VueRouter.createRouter({//提供要实现的history实现。为了方便起见，这里使用hash historyhistory:VueRouter.createWebHashHistory(),routes //简写，相当于routes：routes});const vm= Vue.createApp({data(){ return{}},methods: {goFirst:function() {this.$router.push({path: '/first'})},goSecond:function() {this.$router.push({path: '/second'})},goThird:function() {this.$router.push({path: '/third'})},goFourth:function() {this.$router.push({path: '/fourth'})},next:function() {this.$router.go(1)},pre:function() {this.$router.go(-1)},replace:function() {this.$router.replace({path: '/special'})}},router: router});//使用路由器实例，从而让整个应用都有路由功能vm.use(router);vm.mount('#app');
</script>
</body>
</html>六、组件与Vue Router间解耦
1、布尔模式
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>布尔模式</title>
</head>
<body>
<style>.style1{background: #0BB20C;color: white;}
</style>
<body>
<div id="app"><div class="main"><div ><button @click="next">前进</button><button @click="goFirst">第1页</button><button @click="goSecond">第2页</button><button @click="goThird">第3页</button><button @click="goFourth">第4页</button><button @click="pre">后退</button><button @click="replace">替换当前页为特殊页</button></div><div class="style1"><router-view></router-view></div></div>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<!--引入Vue Router-->
<script src="https://unpkg.com/vue-router@next"></script>
<script>const first = {template: '<h3>花时同醉破春愁，醉折花枝作酒筹。</h3>'};const second = {template: '<h3>忽忆故人天际去，计程今日到梁州。</h3>'};const third = {//注意这里props: ['id'],template: '<h3>圭峰霁色新，送此草堂人。---{{id}}</h3>'};const fourth = {template: '<h3>终有烟霞约，天台作近邻。</h3>'};const special = {template: '<h3>特殊页面的内容</h3>'};// 2.定义路由信息const routes = [{path: '/first',component: first},{path: '/second',component: second},{path: '/third/:id',component: third,//还有这里props: true},{path: '/fourth',component: fourth},{path: '/special',component: special}];const router= VueRouter.createRouter({//提供要实现的history实现。为了方便起见，这里使用hash historyhistory:VueRouter.createWebHashHistory(),routes //简写，相当于routes：routes});const vm= Vue.createApp({data(){ return{}},methods: {goFirst:function() {this.$router.push({path: '/first'})},goSecond:function() {this.$router.push({path: '/second'})},goThird:function() {this.$router.push({path: '/third'})},goFourth:function() {this.$router.push({path: '/fourth'})},next:function() {this.$router.go(1)},pre:function() {this.$router.go(-1)},replace:function() {this.$router.replace({path: '/special'})}},router: router});//使用路由器实例，从而让整个应用都有路由功能vm.use(router);vm.mount('#app');
</script>
</body>
</html>点击第三页，然后在URL路径后添加/abc即可完成跳转
而这次跳转并未建立对应的Vue Router，所以说实现了组件与Router的解耦
其本质其实就是该组件需要提供参数才可以跳转，然而Router中的path并未提供Router，所以不会通过Router进行跳转
2、对象模式
props中的值是静态的
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>对象模式</title>
</head>
<body>
<style>.style1{background: #0BB20C;color: white;}
</style>
<body>
<div id="app"><div class="main"><div ><button @click="next">前进</button><button @click="goFirst">第1页</button><button @click="goSecond">第2页</button><button @click="goThird">第3页</button><button @click="goFourth">第4页</button><button @click="pre">后退</button><button @click="replace">替换当前页为特殊页</button></div><div class="style1"><router-view></router-view></div></div>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<!--引入Vue Router-->
<script src="https://unpkg.com/vue-router@next"></script>
<script>const first = {template: '<h3>花时同醉破春愁，醉折花枝作酒筹。</h3>'};const second = {template: '<h3>忽忆故人天际去，计程今日到梁州。</h3>'};const third = {props: ['name'],template: '<h3>圭峰霁色新，送此草堂人。---{{name}}</h3>'};const fourth = {template: '<h3>终有烟霞约，天台作近邻。</h3>'};const special = {template: '<h3>特殊页面的内容</h3>'};// 2.定义路由信息const routes = [{path: '/first',component: first},{path: '/second',component: second},{path: '/third/:name',component: third,props: {name: 'gushi'},},{path: '/fourth',component: fourth},{path: '/special',component: special}];const router= VueRouter.createRouter({//提供要实现的history实现。为了方便起见，这里使用hash historyhistory:VueRouter.createWebHashHistory(),routes //简写，相当于routes：routes});const vm= Vue.createApp({data(){ return{}},methods: {goFirst:function() {this.$router.push({path: '/first'})},goSecond:function() {this.$router.push({path: '/second'})},goThird:function() {this.$router.push({path: '/third'})},goFourth:function() {this.$router.push({path: '/fourth'})},next:function() {this.$router.go(1)},pre:function() {this.$router.go(-1)},replace:function() {this.$router.replace({path: '/special'})}},router: router});//使用路由器实例，从而让整个应用都有路由功能vm.use(router);vm.mount('#app');
</script>
</body>
</html>不管传入的是什么参数，最终props获取到的值都是’gushi’
3、函数模式
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>函数模式</title>
</head>
<body>
<style>.style1{background: #0BB20C;color: white;}
</style>
<body>
<div id="app"><div class="main"><div ><button @click="next">前进</button><button @click="goFirst">第1页</button><button @click="goSecond">第2页</button><button @click="goThird">第3页</button><button @click="goFourth">第4页</button><button @click="pre">后退</button><button @click="replace">替换当前页为特殊页</button></div><div class="style1"><router-view></router-view></div></div>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<!--引入Vue Router-->
<script src="https://unpkg.com/vue-router@next"></script>
<script>const first = {template: '<h3>花时同醉破春愁，醉折花枝作酒筹。</h3>'};const second = {template: '<h3>忽忆故人天际去，计程今日到梁州。</h3>'};const third = {props: ['name',"id"],template: '<h3>圭峰霁色新，送此草堂人。---{{name}}——{{id}}</h3>'};const fourth = {template: '<h3>终有烟霞约，天台作近邻。</h3>'};const special = {template: '<h3>特殊页面的内容</h3>'};// 2.定义路由信息const routes = [{path: '/first',component: first},{path: '/second',component: second},{path: '/third',component: third,props: (route)=>({id:route.query.id,name:"xiaohong"})},{path: '/fourth',component: fourth},{path: '/special',component: special}];const router= VueRouter.createRouter({//提供要实现的history实现。为了方便起见，这里使用hash historyhistory:VueRouter.createWebHashHistory(),routes //简写，相当于routes：routes});const vm= Vue.createApp({data(){ return{}},methods: {goFirst:function() {this.$router.push({path: '/first'})},goSecond:function() {this.$router.push({path: '/second'})},goThird:function() {this.$router.push({path: '/third'})},goFourth:function() {this.$router.push({path: '/fourth'})},next:function() {this.$router.go(1)},pre:function() {this.$router.go(-1)},replace:function() {this.$router.replace({path: '/special'})}},router: router});//使用路由器实例，从而让整个应用都有路由功能vm.use(router);vm.mount('#app');
</script>
</body>
</html>在URL路径中输入？id=123
Vue.js 3.0 学习笔记（十一）Vue Router路由相关推荐
- Vue.js 3.0 学习笔记（十）过渡和动画效果
一.单元素/组件过渡 1.CSS过渡 控制p元素显示和隐藏 <!DOCTYPE html> <html> <head><meta charset=" ...
- Vue.js 3.0 学习笔记（七）class与style绑定
一.绑定HTML样式(class) 1.数组语法 <!DOCTYPE html> <html> <head><meta charset="UTF-8 ...
- Vue.js 3.0 学习笔记（三）指令
一.内置指令 1.v-show v-show指令会根据表达式的真假值,切换元素的display CSS属性,来显示或者隐藏元素.当条件变化时,该指令会自动触发过渡效果 <!DOCTYPE htm ...
- Vue.js入门（学习笔记）
说在前头: 本人为大三在读学生,书写文章的目的是为了对自己掌握的知识和技术进行一定的记录,同时乐于与大家一起分享,因本人资历尚浅,发布的文章难免存在一些错漏之处,还请阅读此文章的大牛们见谅与斧正.若在 ...
- Vue.js 2.0 学习重点记录
Vue.js兼容性 Vue.js.js 不支持 IE8 及其以下版本,因为 Vue.js.js 使用了 IE8 不能模拟的 ECMAScript 5 特性. Vue.js.js 支持所有兼容 EC ...
- Vue2.0学习笔记：Vue事件修饰符的使用
事件处理 如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到methods中的方法中. 在Vue中,事件修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间 ...
- vue.js 2.0 官方文档学习笔记 —— 01. vue 介绍
这是我的vue.js 2.0的学习笔记,采取了将官方文档中的代码集中到一个文件的形式.目的是保存下来,方便自己查阅. !官方文档:https://cn.vuejs.org/v2/guide/ 01. ...
- Vue学习笔记(十一)
1.Vue学习笔记(十一) 文章目录 1.Vue学习笔记(十一) 1.1Vue_配置代理_方式 1.1.0演示问题 1.1.1运行node server1 1.1.2运行node server2 1. ...
- Vue.js 3.0快速入门（附电影购票APP开发实战源码）
前言 文档笔记来源:kuangshenstudy,清华大学出版社,结合视频资源食用更佳,相关资源源码在文末,有需要自取. 一.概述 Vue是什么? Vue.js是基于JavaScript的一套MVVC ...
最新文章
- GAN生成对抗网络-DCGAN原理与基本实现-深度卷积生成对抗网络03
- java 代码scope注解_Spring学习（15）--- 基于Java类的配置Bean 之 @Bean @Scope 注解
- 依赖注入模式中，为什么用对象而不是用数组传递？
- 解决：按截图 ctrl+alt+a QQ聊天窗口就自动最小化（QQ以外的可以截图）
- （21）Spring Boot过滤器、监听器【从零开始学Spring Boot】
- 【开源】QuickPager ASP.NET2.0分页控件V2.0.0.1——支持多种数据库。让分页更加简单。...
- Spring与策略模式
- 《Java核心技术 卷II》笔记——（12）安全加密
- Securing Checklists
- Oracle数据库练习题及答案（个人总结）
- 手绘板计算机技术,手绘板怎么用 手绘板和数位板的差别区别【详解】
- “无法访问 您可能没有权限使用网络资源”解决办法
- Excel-VBA 快速上手（三、数组和字典）
- 运维屌丝回答网传Linux运维面试题（一）
- Linux下PCB的task_struck结构体
- mongodb 基本操作：文档查询
- python装在固态还是机械好_大容量与高性能SSD硬盘的比较
- win7计算机亮度怎么调节,win7系统屏幕亮度怎么修改调整
- spark-sql总结
- 【华为思科】访问web服务器