怎样建设网站,合肥市建设工程造价信息网站,常州网站制作包括哪些,广东做seo的公司#x1f4dd;个人主页#xff1a;五敷有你 #x1f525;系列专栏#xff1a;Vue
⛺️稳中求进#xff0c;晒太阳 目录
路由
单页应用程序 总结#xff1a;
VueRouter
核心步骤#xff1a;
组件存放目录的问题
路由的封装
声明式导航
声明式导航 - 导航链… 个人主页五敷有你 系列专栏Vue
⛺️稳中求进晒太阳 目录
路由
单页应用程序 总结
VueRouter
核心步骤
组件存放目录的问题
路由的封装
声明式导航
声明式导航 - 导航链接
声明式导航 - 两个类名
声明式导航-跳转传参
查询参数传参
动态路由传参
Vue路由的-重定向
Vue路由-404
Vue路由-模式设置
编程式导航 - 基本跳转 路由
单页应用程序
单页面应用:(SPA):所有功能在 一个html页面上 实现 开发分类 实现方式 页面性能 开发效率 用户体验 学习成本 首屏加载 SEO 单页 一个html 按需更新 性能高 高 非常好 高 慢 差 多页 多个html页面 整页更新 性能低 中等 一般 中等 快 优
单页面应用 系统网站内部网站文档网站移动端站点 具体实例网易云多页面应用 公司官网电商类网站
总结
单页面应用程序之所以开发效率高性能高用户体验好 最大原因就是页面按需更新按需更新首先需要明确: 访问路径和组件的对应关系---路由
生活中的路由设备和ip的映射关系
Vue中的路由 路径和组件的映射关系
VueRouter
作用修改地址栏路径时切换显示匹配的组件
说明Vue官方的一个路由插件是一个第三方包
使用步骤写在main.js 1. 下载下载VueRouter 模板到当前工程 版本3.6.5
yarn add vue-router3.6.5
npm i vue-router3.6.5 2. 引入
import VueRouter from vue-router 3 .安装注册
Vue.use(VueRouter) 4. 创建路由对象
const routernew VueRouter() 5.注入将路由对象注入到newVue实例中建立关联
new Vue({render:hh(App),router:router
}).$mount(#app)
核心步骤 1.创建需要的组件(views目录),配置路由规则
import Find from ./views/Find.vue
import Find from ./views/Find.vue
import Find from ./views/Find.vueconst routernew VueRouter({routes:[{path:/find,component:Find}, {path:/find,component:Find}, {path:/find,component:Find}, ]
}) 2.配置导航配置路由出口路径匹配的组件的位置 router-view/router-view确定显示的位置
div classfooter_warpa href#/find发现音乐/aa href#/my我的音乐/aa href#/friend朋友/a
/div
divrouter-view/router-view
/div
组件存放目录的问题
注意.vue文件 本质无区别
路由相关的组件为什么放在views目录呢
组件分类
页面组件 - 页面展示 - 配合路由用 -view层复用组件 - 展示数据 - 常用于复用 -components层
路由的封装
问题所有的路由都堆在main.js中合适么
目标将所有的模块抽离出来
好处拆分模块
封装到router/index.js下
import myMusic from /components/myMusic.vue
import myFriends from /components/myFriends.vue
import findMusic from /components/findMusic.vue
import Vue from vue
import VueRouter from vue-router
!--VueRouter组件的初始化--
Vue.use(VueRouter)
!--创建一个路由对象--
const routernew VueRouter({routes:[//router 路由规则//route 一条路由规则{path:路径,component:组件名}{path:/my,component:myMusic},{path:/find,component:findMusic},{path:/friend,component:myFriends},]
})--导出路由--
export default router;
之后再在main.js中导入
import router from ./router/index
声明式导航
声明式导航 - 导航链接
vue-router提供了一个全局组件router-link(取代a标签)
能跳转配置to属性指定路径(必须)本质还是a标签to无需# router-link tofind发现音乐/router-linkrouter-link tofriend我的朋友/router-linkrouter-link tomy我的音乐/router-link
能高亮默认就会提高高亮类名可以直接设置高亮样式 有.router-link-active有。router-link-exact-active router-link tofind classrouter-link-exact-active router-link-active发现音乐/router-linkrouter-link tofriend我的朋友/router-linkrouter-link tomy我的音乐/router-link
声明式导航 - 两个类名
router-link自动给当前导航添加了两个高亮类名 1.router-link-active 模糊匹配(用的多) to/my 可以匹配 /my /my/a /my 2.router-link-exact-active 精确匹配 to/my 仅可以匹配 /my 声明式导航-跳转传参
目标:在跳转的路由的时候传参 查询参数传参 语法格式如下 to/to?参数名值 div classnavrouter-link tofind?key发现音乐发现音乐/router-linkrouter-link tofriend?key我的朋友我的朋友/router-linkrouter-link tomy?key我的音乐我的音乐/router-link/div 对应页面组件接受传递过来的值 $route.query.参数名.
templatediv classmainh1{{ $route.query.key }}/h1p朋友的音乐/pp朋友的音乐/pp朋友的音乐/pp朋友的音乐/p/div
/template
动态路由传参
配置动态路由 {path:/my/:word,component:myMusic},
const routernew VueRouter({routes:[{path:/my/:word,component:myMusic},{path:/find/:word,component:findMusic},{path:/friend/:word,component:myFriends},]
}) 2. 配置导航链接 topath/参数值
router-link to/my/我的音乐我的音乐/router-link 3.对应页面组件接受传递过来的值 $route.params.参数名 h1{{ $route.params.word }}/h1 Vue路由的-重定向
问题网页打开url默认时是/路径未匹配到组件时会出现空白
说明重定向 →匹配path后强制跳转path路径
语法{path:匹配路径,redirect:重定向的路径}
const routernew VueRouter({routes:[{path:/,redirect:/find/爱你},{path:/my/:words,component:myMusic},{path:/find/:words,component:findMusic},{path:/friend/:words,component:myFriends},]
})
Vue路由-404
作用:当路径找不到匹配时给个提示页面
位置配置路由的最后
语法path:*(任意路径)-前面不匹配就命中最后一个
const routernew VueRouter({routes:[{path:/,redirect:/find/爱你},{path:/my/:words,component:myMusic},{path:/find/:words,component:findMusic},{path:/friend/:words,component:myFriends},{path:*,component:NotFind},]
})
Vue路由-模式设置
问题路由的路径带有#,能否真正切成路径形式
hash路由(默认) 例如 http://localhost:8080/#/home
history路由(常用) 例如 http://localhost:8080/home 在index.js中
const routernew VueRouter({mode:history,routes:[{path:/,redirect:/find/爱你},{path:/my/:words,component:myMusic},{path:/find/:words,component:findMusic},{path:/friend/:words,component:myFriends},{path:*,component:NotFind},]
})编程式导航 - 基本跳转
问题点击按钮怎么跳转
编程式导航用js代码跳转
两种语法
path 路径跳转
简单写法
this.$router.push(/路由路径)
复杂写法
this.$router.push({path:/路由路径,
})
query传参
简写
this.$router.push(/路径?参数1值,参数2值,参数3值)完整写法
this.$router.push({path:/路径query:{参数名1:值参数名2:值}
})
对应取值h1{{ $route.query.key }}/h1
动态传参
简写
this.$router.push(/路径/${this.inpValue})
完整写法
this.$router.push({path:路径/关键词
})//取值
this.$route.param.words
name 命名路由跳转(适合path路径长的场景)
{name:路由名,path:/path/xxx,component:xxx}
//query传参
this.$router.push({name:路由名,query:{}
})
//动态路由传参
this.$router.push({name:路由名,param:{}
})
