vue中$router和$route,vue3 vue-router

2022-09-06 12:00:53 分类：vue 阅读()

　　vue中$router和$route,vue3 vue-router

　　这篇文章主要为大家详细介绍了vue3.0之路由器的使用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助

　　

目录

　　 vue3.0之路由器的使用命名式路由命名式路由使用路由器链接编程式导航router/index.tsApp.vue跳转到路由历史记录路由器链接跳转路由编程式导航非历史记录的导航还可以使用方法路由传参询问方式传参（拼接在全球资源定位器(统一资源定位器)上)参数传递参数（不会显示在全球资源定位器(统一资源定位器)上，但是一刷新会丢失数据)动态路由的传参（需要在路由的小路添加一个动态参数，浏览器刷新后，数据不会丢失)嵌套路由与路由重定向路由App.vueHome.vue登录注册效果总结

　　

vue3.0之Router的使用

　　先创建一个某视频剪辑软件项目

　　

命名式 路由

　　

命名式 路由

　　-就是给路由添加名字属性

　　从" vue路由器"导入{ createRouter，createWebHistory }

　　从以下位置导入主页./views/home/Home.vue

　　const router=createRouter({

　　history:createWebHistory(导入。meta。环境。base _ URL)，

　　路线：[

　　{

　　路径："/",

　　名称：登录，

　　组件：()=导入(./views/login/Login.vue )，

　　},

　　{

　　路径："/reg "，

　　名称：注册，

　　组件：()=导入(./views/reg/Reg.vue )，

　　},

　　],

　　})

　　导出默认路由器

　　

使用 RouterLink

　　脚本安装语言=ts

　　从" vue路由器"导入{ RouterLink，RouterView }

　　/脚本

　　模板

　　差异

　　RouterView /

　　路由器链接：to= { name: log in } 登录/路由器链接

　　路由器链接style= margin-left:10px :to= { name: Reg } Reg/路由器链接

　　/div

　　/模板

　　风格

　　@ import @/assets/base。CSS ；

　　#app {

　　最大宽度：1280像素；

　　边距：0自动；

　　填充：2rem

　　字体粗细：正常；

　　}

　　/风格

　　效果

　　

编程式导航

　　

router / index.ts

　　从" vue路由器"导入{ createRouter，createWebHistory }

　　从以下位置导入主页./views/home/Home.vue

　　const router=createRouter({

　　history:createWebHistory(导入。meta。环境。base _ URL)，

　　路线：[

　　{

　　路径："/",

　　名称：登录，

　　组件：()=导入(./views/login/Login.vue )，

　　},

　　{

　　路径："/登录"，

　　名称：登录，

　　组件：()=导入(./views/login/Login.vue )，

　　},

　　{

　　路径："/reg "，

　　名称：注册，

　　组件：()=导入(./views/reg/Reg.vue )，

　　},

　　],

　　})

　　导出默认路由器

　　

App.vue 跳转到路由

　　router.push(/login )跳转字符串

　　模板

　　差异

　　button @click=loginClick 登录/按钮

　　button @click=regClick 注册/按钮

　　RouterView /

　　/div

　　/模板

　　脚本安装语言=ts

　　从" vue路由器"导入{路由器链接，路由器视图，用户路由器}

　　const router=useRouter()

　　const loginClick=()={

　　router.push(/login )

　　}

　　const regClick=()={

　　router.push(/reg )

　　}

　　/脚本

　　风格

　　@ import @/assets/base。CSS ；

　　#app {

　　最大宽度：1280像素；

　　边距：0自动；

　　填充：2rem

　　字体粗细：正常；

　　}

　　/风格

　　效果

　　router.push({ path: url })对象的形式

　　模板

　　差异

　　button @ click=首页(/登录，登录)登录/按钮

　　button @ click=首页(/reg ， reg )注册/按钮

　　RouterView /

　　/div

　　/模板

　　脚本安装语言=ts

　　从" vue路由器"导入{路由器链接，路由器视图，用户路由器}

　　const router=useRouter()

　　const toPage=(url: string，name: string)={

　　//对象的形式

　　router.push({

　　路径：url，

　　})

　　}

　　/脚本

　　命名式路由模式router.push({ name: name })

　　模板

　　差异

　　button @ click=首页(/登录，登录)登录/按钮

　　button @ click=首页(/reg ， reg )注册/按钮

　　RouterView /

　　/div

　　/模板

　　脚本安装语言=ts

　　从" vue路由器"导入{路由器链接，路由器视图，用户路由器}

　　const router=useRouter()

　　const toPage=(url: string，name: string)={

　　//命名式路由模式

　　router.push({

　　姓名：姓名，

　　})

　　}

　　/脚本

　　

历史记录

　　替换的使用采用替换进行页面的跳转会同样也会创建渲染新的某视频剪辑软件组件，但是在历史中其不会重复保存记录，而是替换原有的某视频剪辑软件组件

　　

RouterLink 跳转路由

　　模板

　　差异

　　路由器链接替换：to= { name: log in } 登录/路由器链接

　　路由器链接替换style= margin-left:10px :to= { name: Reg } Reg/路由器链接

　　RouterView /

　　/div

　　/模板

　　脚本安装语言=ts

　　从" vue路由器"导入{路由器链接，路由器视图，用户路由器}

　　const router=useRouter()

　　/脚本

　　效果

　　

编程式导航

　　模板

　　差异

　　button @ click=首页(/登录，登录)登录/按钮

　　button @ click=首页(/reg ， reg )注册/按钮

　　RouterView /

　　/div

　　/模板

　　脚本安装语言=ts

　　从" vue路由器"导入{路由器链接，路由器视图，用户路由器}

　　const router=useRouter()

　　const toPage=(url: string，name: string)={

　　//字符串的形式

　　路由器。替换(网址)

　　//对象的形式

　　//router.push({

　　//路径：url，

　　//})

　　//命名式路由模式

　　//router.push({

　　//名称：名称，

　　//})

　　}

　　/脚本

　　

非历史 记录的导航 还可以使用 方法

　　使用路由器。推送的方式，是存在历史记录的因此可以使用router.go的方法router.go(1)前进一个路由router.go(-1)后退一个路由模板

　　差异

　　button @ click=首页(/登录，登录)登录/按钮

　　button @ click=首页(/reg ， reg )注册/按钮

　　button @ click=下一次单击下一步/button

　　button @ click= prer click prer/button

　　RouterView /

　　/div

　　/模板

　　脚本安装语言=ts

　　从" vue路由器"导入{路由器链接，路由器视图，用户路由器}

　　const router=useRouter()

　　const toPage=(url: string，name: string)={

　　//字符串的形式

　　路由器。推送(网址)

　　}

　　const prerClick=()={

　　router.go(-1)

　　}

　　const nextClick=()={

　　router.go(1)

　　}

　　/脚本

　　

路由传参

　　

query 方式传参（拼接在url上）

　　注意点：就是使用路由的跳转，是使用路由器这个对象从vue-router const router=用户外部()路由器。push({ name: Reg ，query : Obj })导入{用户外部}注意点2:使用路由的获取参数，是使用途径这个对象，去获取全球资源定位器(统一资源定位器)参数的数据（也就是路由传递的参数数据)从" vue路由器"导入{用户输出}常量路线=用户输出()路线。查询。XXX数据商品页

　　模板

　　div class=登录

　　divLogin/div

　　div v-for= item in data :key= item。id为“{ item。name } }-{ { item。price } } button @ click= view(item)详情/按钮/div

　　/div

　　/模板

　　脚本安装语言=ts

　　从“vue”导入{反应性}

　　从“vue路由器"导入{用户外部}

　　从导入{数据} ./List.json

　　const router=useRouter()

　　类型列表={

　　名称：字符串

　　价格：数量

　　id:号码

　　}

　　const view=(List: List)={

　　router.push({

　　名称：注册，

　　查询：列表，

　　})

　　}

　　/脚本

　　脚本语言

　　导出默认值{

　　名称：登录，

　　}

　　/脚本

　　样式lang=scss 范围。登录{

　　宽度：400像素

　　高度：400像素

　　背景：粉色；

　　}

　　/风格

　　List.json

　　{

　　数据:[{

　　姓名: 菜鸡，

　　价格:111,

　　id: 1

　　}, {

　　姓名: 菜狗，

　　价格:222,

　　id: 2

　　}, {

　　姓名: 菜鸟，

　　价格:333,

　　id: 3

　　}]

　　}

　　详情页

　　！-

　　描述：

　　作者：xzl

　　时间：03月25日201225

　　-

　　模板

　　div class=reg

　　差异我是详情页面- button @click=router.back()返回/按钮/div

　　差异

　　差异唯一值：{{ route.query.id }}/div

　　差异名称：{{ route.query.name }}/div

　　差异价格：{{ route.query.price }}/div

　　/div

　　/div

　　/模板

　　脚本安装语言=ts

　　从“vue”导入{}

　　从“vue路由器"导入{ useRoute，useRouter }

　　const route=useRoute()

　　const router=useRouter()

　　console.log(route ，route.query)

　　/脚本

　　脚本语言

　　导出默认值{

　　名称：注册，

　　}

　　/脚本

　　样式lang=scss 范围。注册{

　　宽度：400像素

　　高度：400像素

　　背景：橙色；

　　}

　　/风格

　　效果

　　

params传递参数 （不会显示在url上，但是一刷新会丢失数据）

　　商品页

　　！-

　　描述：

　　作者：xzl

　　时间：03月25日201105

　　-

　　模板

　　div class=登录

　　divLogin/div

　　div v-for= item in data :key= item。id为“{ item。name } }-{ { item。price } } button @ click= view(item)详情/按钮/div

　　/div

　　/模板

　　脚本安装语言=ts

　　从“vue”导入{反应性}

　　从“vue路由器"导入{用户外部}

　　从导入{数据} ./List.json

　　const router=useRouter()

　　类型列表={

　　名称：字符串

　　价格：数量

　　id:号码

　　}

　　const view=(List: List)={

　　//router.push(/reg )

　　router.push({

　　名称：注册，

　　参数：列表，

　　})

　　}

　　/脚本

　　脚本语言

　　导出默认值{

　　名称：登录，

　　}

　　/脚本

　　样式lang=scss 范围。登录{

　　宽度：400像素

　　高度：400像素

　　背景：粉色；

　　}

　　/风格

　　详情页

　　！-

　　描述：

　　作者：xzl

　　时间：03月25日201225

　　-

　　模板

　　div class=reg

　　差异我是详情页面- button @click=router.back()返回/按钮/div

　　差异

　　差异唯一值：{{ route.params.id }}/div

　　差异名称：{{ route.params.name }}/div

　　差异价格：{{ route.params.price }}/div

　　/div

　　/div

　　/模板

　　脚本安装语言=ts

　　从“vue”导入{}

　　从“vue路由器"导入{ useRoute，useRouter }

　　const route=useRoute()

　　const router=useRouter()

　　console.log(route ，route.query)

　　/脚本

　　脚本语言

　　导出默认值{

　　名称：注册，

　　}

　　/脚本

　　样式lang=scss 范围。注册{

　　宽度：400像素

　　高度：400像素

　　背景：橙色；

　　}

　　/风格

　　

动态路由的 传参（需要在路由的path添加一个动态参数，浏览器刷新后，数据不会丢失）

　　注意点：就是在路由之中，对小路路径添加一个动态的路由参数在商品页之中，使用路由器。推送的方式去跳转，里面用参数的形式去接受那个动态参数在详情页之中，使用途径对象的形式去拿到数据，route.params.id路由

　　从" vue路由器"导入{ createRouter，createWebHistory }

　　从以下位置导入主页./views/home/Home.vue

　　const router=createRouter({

　　history:createWebHistory(导入。meta。环境。base _ URL)，

　　路线：[

　　{

　　路径："/",

　　名称：登录，

　　组件：()=导入(./views/login/Login.vue )，

　　},

　　{

　　路径："/登录"，

　　名称：登录，组件：()=导入(./views/login/Login.vue )，

　　},

　　{

　　路径："/reg/:id "，

　　名称：注册，

　　组件：()=导入(./views/reg/Reg.vue )，

　　},

　　],

　　})

　　导出默认路由器

　　商品页

　　模板

　　div class=登录

　　divLogin/div

　　div v-for= item in data :key= item。id为“{ item。name } }-{ { item。price } } button @ click= view(item)详情/按钮/div

　　/div

　　/模板

　　脚本安装语言=ts

　　从“vue”导入{反应性}

　　从“vue路由器"导入{用户外部}

　　从导入{数据} ./List.json

　　const router=useRouter()

　　类型列表={

　　名称：字符串

　　价格：数量

　　id:号码

　　}

　　const view=(List: List)={

　　router.push({

　　名称：注册，

　　参数：{

　　id: List.id，

　　},

　　})

　　}

　　/脚本

　　脚本语言

　　导出默认值{

　　名称：登录，

　　}

　　/脚本

　　样式lang=scss 范围。登录{

　　宽度：400像素

　　高度：400像素

　　背景：粉色；

　　}

　　/风格

　　详情页

　　模板

　　div class=reg

　　差异我是详情页面- button @click=router.back()返回/按钮/div

　　差异

　　差异唯一值：{{ item.id }}/div

　　差异名称：{{ item.name }}/div

　　差异价格：{{ item.price }}/div

　　/div

　　/div

　　/模板

　　脚本安装语言=ts

　　从“vue”导入{}

　　从“vue路由器"导入{ useRoute，useRouter }

　　const route=useRoute()

　　const router=useRouter()

　　从导入{数据}./login/List.json

　　常量项目=数据。查找((项目)=项目。id===编号(路线。参数。id))

　　/脚本

　　脚本语言

　　导出默认值{

　　名称：注册，

　　}

　　/脚本

　　样式lang=scss 范围。注册{

　　宽度：400像素

　　高度：400像素

　　背景：橙色；

　　}

　　/风格

　　效果

　　

嵌套路由 与 路由重定向

　　

路由

　　从" vue路由器"导入{ createRouter，createWebHistory }

　　从以下位置导入主页./views/home/Home.vue

　　const router=createRouter({

　　history:createWebHistory(导入。meta。环境。base _ URL)，

　　路线：[

　　{

　　路径："/",

　　姓名：家，

　　成分：家，

　　儿童：[

　　{

　　路径： ,

　　重定向："登录",//路由重定向默认显示注册组件

　　},

　　{

　　路径："登录",

　　名称：登录，

　　组件：()=导入(./views/login/Login.vue )，

　　},

　　{

　　路径：“reg”，

　　名称：注册，

　　组件：()=导入(./views/reg/Reg.vue )，

　　},

　　],

　　},

　　],

　　})

　　导出默认路由器

　　

App.vue

　　模板

　　差异

　　路由器-视图/

　　/div

　　/模板

　　脚本安装语言=ts

　　从“vue路由器"导入{ RouterView }

　　/脚本

　　风格

　　@ import @/assets/base。CSS ；

　　#app {

　　最大宽度：1280像素；

　　边距：0自动；

　　填充：2rem

　　字体粗细：正常；

　　}

　　/风格

　　

Home.vue

　　模板

　　差异

　　路由器视图/路由器视图

　　差异我是父路由主页/分区

　　button @ click=路由器。push(/reg )去注册/按钮

　　/div

　　/模板

　　脚本安装语言=ts

　　从“vue路由器"导入{ RouterView }

　　从“vue路由器"导入{用户外部}

　　从“vue”导入{}

　　const router=useRouter()

　　/脚本

　　脚本语言

　　导出默认值{

　　姓名：家，

　　}

　　/脚本

　　style lang=scss scoped/style

　　

登录

　　模板

　　divLogin/div

　　/模板

　　

注册

　　模板

　　divReg/div

　　/模板

　　

效果

　　

总结

　　本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

标签： vue

相关文章阅读

  • 【干货】Vue2.x 组件通信方式详解，这篇讲全了
  • Vue项目的网络请求代理到封装详细步骤
  • React和Vue怎么实现文件下载进度条
  • Vue的生命周期
  • vue3获取DOM节点的3种方式实例
  • vue+elementUI下拉框自定义颜色选择器方式
  • vue数据监听器watch和watchEffect的使用
  • vue首屏加载慢优化方案,vue页面加载慢,vue终极性能优化方案(解决首页加载慢问题)
  • vue项目配置多个请求域名,
  • vue项目配置多个请求域名,,vue项目如何让局域网ip访问配置设置
  • Vue项目启动,nodejs启动vue项目,如何启动一个Vue.js项目
  • vue项目proxy代理不起作用,vue3 proxy代理
  • vue项目proxy代理不起作用,vue3 proxy代理,Vue中如何实现proxy代理
  • Vue页面刷新,vue动态刷新页面
  • Vue页面刷新,vue动态刷新页面,vue中实现页面刷新以及局部刷新的方法
    • 留言与评论（共有 条评论）
       
    验证码：