wordpress音乐主题musik汉化,搜索引擎优化seo名词解释,计算机网络技术有哪些,免费网站app哪个最好全栈开发一条龙——前端篇 第一篇#xff1a;框架确定、ide设置与项目创建 第二篇#xff1a;介绍项目文件意义、组件结构与导入以及setup的引入。 第三篇#xff1a;setup语法#xff0c;设置响应式数据。 第四篇#xff1a;数据绑定、计算属性和watch监视 第五篇 : 组件…全栈开发一条龙——前端篇 第一篇框架确定、ide设置与项目创建 第二篇介绍项目文件意义、组件结构与导入以及setup的引入。 第三篇setup语法设置响应式数据。 第四篇数据绑定、计算属性和watch监视 第五篇 : 组件间通信及知识补充 第六篇生命周期和自定义hooks
本文将带你从头到尾将Vue3中的路由学透学完之后所有的跳转需求都可以实现。 文章目录 路由一、路由基础实践——流程梳理1.index.ts2.三个页面组件的vue3.main.ts4.app.vue5.自定义路由名效果展示 二、路由模式1.history模式2.hash模式3.模式使用推荐 三、嵌套路由1.基本嵌套2.路由传参1.query参数a基本写法b对象快速写法 2.params参数1.基本写法2.快捷写法 3.路由的props配置 四、编程式导航重要脚本操作跳转五、补充1.replace属性2.重定向 路由
路由可以实现页面的跳转可以用来实现SPA应用单页面应用 类似这种左边导航右边展示全程画面不抖动不跳转。
点击导航路径网址发生变化路由器捕获卸载当前组件挂载新的组件这些组件都是一个一个Vue文件写的页面。
一、路由基础实践——流程梳理
我们先安装路由 npm i vue-router,再在src下创建router文件夹。
1.index.ts
我们在router中创建index.ts,这个文件的意义在于创建一个路由器并将之暴露出来。
import { createRouter } from vue-router
import home from /components/home.vue;
import dog from /components/dog.vue;
import cc from /components/cc.vue;
//创建路由器
const router createRouter({//管理路由routes:[ //一个一个的路由规则{//路径path:/home,//组件绑定component:home},{//路径path:/dog,//组件绑定component:dog},{//路径path:/test,//组件绑定component:cc}]
})export default router
请仔细查看写在代码旁的注释这里做一个大致说明这个地方是要进行一个路由的绑定我们先在src/components中新建三个文件这三个文件就是之后我们可以用来切换的页面Vue文件 然后按照如上语法绑定至此我们的路由器就建立好了。
可能遇到的报错 如果遇到这个问题是因为你没有设置路由模式这个在本文后面会讲 你要引入设置路由模式的组件
//引入路由器模式
import { createWebHistory } from vue-router;然后在const中加入 history:createWebHistory(), 这样报错就消失了。
2.三个页面组件的vue
我们绑定完成之后必须要在相应组件中加入内容不然会报错。我们测试的时候可以随便写我以下给出三个样例你可以直接复制。 dog.vue:
templatediv class style_test button clickadd_border_collie添加一只边牧/button hrimg v-for(bc,index) in border_collie :srcbc :keyindex classsizee/divdiv class style_test button clickadd_dog随机添加一只狗/button hrimg v-for(bc,index) in dog :srcbc :keyindex classsizee/div
/templatescript langtsexport default {name : dog//组件名}
/scriptscript langts setupimport {reactive, ref} from vueimport axios from axios;let border_colliereactive([])let dogreactive([])async function add_border_collie(){try{let resultawait axios.get(https://dog.ceo/api/breed/collie/border/images/random)border_collie.push(result.data.message)} catch(error){alert(error)}}async function add_dog(){try{let resultawait axios.get(https://dog.ceo/api/breeds/image/random)dog.push(result.data.message)} catch(error){alert(error)}}/scriptstyle scoped.style_test{background-color: rgb(208, 223, 40);box-shadow: 0 0 10px;border-radius:10px; padding: 20px;}.sizee{height: 150px;margin-right: 10px;}
/style
cc.vue
templateh1TTTi9er/h1
/templatescript langtsexport default {name : test//组件名}
/scriptstyle/stylehome.vue
templateh1Csy/h1
/templatescript langtsexport default {name : home//组件名}
/scriptstyle/style3.main.ts
这个文件是管理创建网页文件和挂载等的。我们需要在这里声明我们的路由器。
import ./assets/main.cssimport { createApp } from vue
import App from ./App.vueimport router from ./router//创建应用
const app createApp(App)//使用路由器
app.use(router)
//挂载app
app.mount(#app)
如图我们需要删掉原来的链式代码讲createapp生成的对象独立出来在上面使用路由器。这样我们就使用了之前export暴露出来的路由器。
4.app.vue
最后一步我们要在主页上展示出我们的路由。
templatediv class apph1 classtitleVue路由/h1!-- 导航 --div classguideRouterLink to/home active-classactive首页/RouterLinkRouterLink to/dog active-classactive狗狗/RouterLinkRouterLink to/test active-classactive测试/RouterLink/div!-- 展示 --div classcontentRouterView/RouterView/div /div
/templatescript
//路由器调用占位
import { RouterView } from vue-router;export default{name : app, //组件名}/scriptstyle.title{text-align: center;word-spacing: 5px;margin: 30px 0;height: 70px;line-height: 70px;background-image: linear-gradient(45deg,gray,white);border-radius: 10px;box-shadow: 0 0 2px;font-size: 30px;}.guide{display: flex;justify-content: space-around;margin: 0 100px;}.guide a {display: block;text-align: center;width: 90px;height: 40px;line-height: 40px;border-radius: 10px;background-color: gray;text-decoration: none;color: white;font-size: 18px;letter-spacing: 5px;}.guide a.active{background-color: #64967E;color: #ffc268;font-weight: 900;text-shadow: 0 0 1px black;font-family: 微软雅黑;}.content{margin: 0 auto;margin-top: 30px;border-radius: 10px;width: 90%;height: 400px;border: 1px solid;}/style注释都写在代码上了style是样式抄一下就行之后会专门写一篇来说怎么写htmlcss样式。html结构看不懂的话可以去看html标志大全链接是配套这个博客的辅助工具。 此处重要的是我们要引入import { RouterView } from vue-router;用来占位来显示我们的页面。
5.自定义路由名
在创建路由器的时候我们可以多配置一项name我们可以依次为跳转标识。 至此我们有三种方法可以跳转字符串name和path以后多用后两种写法他们更方便传参。
效果展示 点击后会切换网址。 我们可以看到在点击了RouterLink标签的按钮之后路径发生了变化页面组件也发生了变化这就是路由的一个基本流程。
注点击切换网页后路由组件挂载切换走就卸载了在使用生命周期函数的时候不要用错了。
二、路由模式
1.history模式
优势 URL美观不带#接近传统网站的URL 缺点项目上线后需要服务端配合处理路径问题否则会有刷新404 写法
在文件开头引入
import { createWebHistory } from vue-router;在路由器创建中加入配置项
history:createWebHistory(),2.hash模式
写法
import { createWebHashHistory } from vue-router;
history:createWebHushHistory(),优点兼容性好不用服务器额外处理路径 缺点不美观 SEO优化差
3.模式使用推荐
如果你要建立的是面向大众的比如b站建议使用history模式。 如果是做专用项目或者自己留档的无所谓是否要在搜索引擎上找到你的建议使用hash模式对个人开发者更友好省事。后台管理项目也最好用hash主打一个稳。 综上除非你已经做大做强了不然建议用hash模式。
三、嵌套路由
1.基本嵌套
有时候一级路由下面还有路由一个最简单的应用一级路由让我新闻区然后二级路由选择哪个新闻 我们需要在创建路由器的时候加入子路由配置。当然与其他路由页一样要先import然后找到其父节点写以下代码。
注意子级路由前不需要加 / 结构中写法与以及路由一致。 to中的路径要精确到二级路由不然Vue自动会去找一级路由然后找不到给你呈现一个空页面。
2.路由传参
1.query参数
a基本写法 就代表传参参数与参数之间用分隔之后我们在detail中接收数据。
在detail中我们先要引入路由组件并调用 接下来我们就可以在结构中调用这些参数了。 以上方法只能传递静态参数不能传递变量我们可以用的方式传递变量注意请加$
b对象快速写法 这就是上文说的方便传参。这样写就清晰得多了。 注意如果你仔细看了上文的三种跳转方式你就知道还可以用name跳转如果用name跳转即使是二级路由也只需要一个name就可以跳转非常方便而且易懂
传递之后为了方便我们可以吧query参数结构出来 然后直接调用query.xx就可以了但是这样会丢失响应式结构响应式数据不能继承响应式。 我们加一个组件来解决这个问题。 这样就好了。
2.params参数
1.基本写法
这是路径传参我们先要到index.ts也就是创建路由器的地方进行占位如果不占位Vue会认为这是路径然后找不到而出错。 然后在路由切换处这么写就能传递参数 在使用处与query类似也是要先引入useRoute然后使用即可。 2.快捷写法 使用params只能使用name锁定路由组件而且传递的参数不能式数组和对象。
总体来说我个人还是推荐query
3.路由的props配置 如果你用的是params参数 你可以使用props配置使用后可以将路由收到的参数转化为一个一个props变量传给组件。 发送处没区别在接受处要这么接收
如果你用的是query想要接收组件看上去干净点你可以把工作量转移到路由器撞创建处 按照如上方法可以给query配置props。
四、编程式导航重要脚本操作跳转
我们在上文已经学习了如何让用户点击路由但是我们又经常遇到需要程序自动跳转的需求比如5秒自动跳转淘宝bushi这就要用到编程式导航。 我们先导入useRouter 导入之后我们直接操作最大的官——路由器了。 我们使用router.push可以直接实现push跳转如果使用replace就能实现无痕跳转。 push加上传参可以按下面这么写跟link几乎一样。 一个非常典型的需求是判断用户账号等信息是否正确如果正确就跳转。
五、补充
1.replace属性 加入后用户不能使用来回退页面。
2.重定向 我们在路由规则中加入重定向上面是原路径下面是重定向路径这样访问上面直接跳转下面。
