Vue3-路由跳转专题详细总结(vue路由跳转的三种方法)

Vue3-路由跳转专题详细总结 一、基本路由

推荐整理分享Vue3-路由跳转专题详细总结(vue路由跳转的三种方法)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vuerouter路由跳转,vuerouter路由跳转,vue路由跳转的三种方法,vue3 路由跳转,vue路由跳转的三种方式及区别,vue路由跳转的三种方式及区别,vue路由跳转的三种方式及区别,vue 路由跳转,内容如对您有帮助，希望把文章链接给更多的朋友！

点击事件似乎可以使用模板更改视图中的内容，个人认为与路由的区别是路由能使网页中的地址栏发生变化 请先阅读基础第二篇

1.创建一个组件,并引入

2.js文件中配置路径

//name相当于别名 { path:'/tabView', component:TabView }, { name:'myComPany', path:'company', component:Company, }

3.使用方式

<router-link to="/tabView">首页</router-link>携带参数

query

<router-link :to="{ path: '/tabView', query: { title: 'query路由传值tabView', }, }" >首页</router-link>

query传参可以用name，也可以用path

<router-link :to="{ name: 'myComPany', params: { title: '使用params进行company路由传参必须要用name命名', }, }" >首页</router-link >

只能用name

<router-link :to="`/home/comPus/666/使用params传值`" class="botTabFather" >校园招聘<span class="hotTab" ><p class="txt">hot</p></span ></router-link >

直接在路径中传递，前提要保证路由文件中已经