浅谈 vue3 路由 router（1）

已于 2022-03-05 17:25:09 修改
阅读量2.5k 收藏 6
点赞数 19
文章标签： javascript 前端 vue.js vue
于 2022-03-05 17:19:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cchhllll/article/details/123295946
版权

        将 Vue Router 添加到组合中时，我们需要做的就是将我们的组件映射到路由并让 Vue Router 知道在哪里渲染它们。

        vue-router默认使用是Hash模式，Hash模式主要是通过url中的hash值来变化的。

  Hash（即#）是url的一个锚点，代表的是网页中的一个位置，当hash值变化时，浏览器就滚动到相应的位置，所以不会重新加载页面。在hash值变化的同时url会被浏览器记录下来，这样既可以使用浏览器的后退了。简单来说，就是 通过改变url中#后面的值，实现浏览器渲染指定的组件

目录

入门

router-view

配置路由实例

路由传参

编程路由跳转（$router）

入门

使用自定义组件来创建链接，而不是使用常规a标签。不重新加载页面的情况下更改 URL，处理 URL 生成及其编码。

相当于带有 href 属性的 a 标签，但是页面不会进行跳转。

    <router-link to="/home">Home</router
最低0.47元/天 解锁文章
前端小菜猫
关注
  • 19
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue中router.go(-1)回退时如何判断有没有上一个路由
DWForYou_DJF
03-17 640
【代码】Vue中router.go(-1)回退时如何判断有没有上一个路由。
vue 路由返回 go(-1) 携带参数
神膘护体小月半的博客
11-01 4915
vue 路由返回 go(-1) 携带参数
Vue3——Router路由语法简介和使用
程序员阿皓的博客
04-17 561
Vue Router是Vue.js官方的路由管理器，用于实现单页面应用的路由功能。可以将不同的组件映射到不同的路由，实现页面间的切换而不刷新整个页面。支持嵌套路由、路由参数、路由导航守卫等功能。
vue3 、 vueRouter基础使用
最新发布
qq_69073409的博客
05-25 1078
vue3中vueRouter的基本使用，包含动态路由匹配、编程式导航、命名路由、命名视图、重定向和别名、路由组件传参
Vue——vue3路由$router.go前进、后退写法
qq_43201350的博客
10-08 1803
Vue——vue3路由$router.go前进、后退写法
Vue路由高级用法
bestkasscn的博客
12-22 740
vue-router的高级用法 路由重定向 路由重定向指的是：用户在访问地址 A 的时候，强制用户跳转到地址 C ，从而展示特定的组件页面。 通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向 const router = createRouter({ history:createWebHashHistory(), routes:[ {path:'/',redirect:'/home'} {path:'/home',component:MyHo
YDOOK:vue3:vue-cli4: router-link 链接访问到一个命名路由 路由跳转 用法详细教程
YDOOK
03-02 231
YDOOK:vue3:vue-cli4: router-link 链接访问到一个命名路由 路由跳转 用法详细教程 © YDOOK JY Lin 1. 原理： 要链接到一个命名路由，可以给 router-link 的 to 属性传一个对象： 这就使得通过: router-link 的 name 属性链接访问到一个已知名称的命名路由变得非常方便。 2. 使用代码示例： <router-link :to="{ name: 'user', params: { userId: 123 }}">Us
Vue3 vue-router 编程式导航、命名路由、重定向、历史模式、路由守卫和路由元信息
g841805的博客
03-19 1287
pathparamsquerynamepath当指定 params 时，可提供 string 或 number 参数（或者对于可重复的参数可提供一个数组）。任何其他类型（如对象、布尔等）都将被自动字符串化。对于可选参数，你可以提供一个空字符串（""）或 null 来移除它。由于属性 to 与 router.push 接受的对象种类相同，所以两者的规则完全相同。此外，router.push 和所有其他导航方法都会返回一个 Promise，让我们可以等到导航完成后才知道是成功还是失败。to。
浅谈vue-router 路由传参的方法
08-28
浅谈vue-router 路由传参的方法 vue-router 是一个基于vue.js的路由器，它提供了强大的路由功能，能够帮助开发者快速构建单页应用程序。本文将详细介绍 vue-router 路由传参的方法，包括路由传参的概念、路由传参的...
浅谈vue-router2路由参数注意的问题
11-27
1、vue 路由 如果传递 params 定义路由的时候是 /路由名称：id 获取的时候 ...以上这篇浅谈vue-router2路由参数注意的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多
浅谈vue-router路由切换 组件重用挖下的坑
12-13
问题描述：vue-router导航切换 时，如果两个路由都渲染同个组件，组件会重（chong）用,组件的生命周期钩子不会再被调用,使得组件的一些数据无法根据 path的改变得到更新 翻车现场再现： 这是我的/router/index.js 的...
【Vue3】 Vue-Router路由和路由导航守卫
weixin_44899940的博客
08-22 5555
Vue-Router路由，编程式导航，动态路由，路由导航守卫
【vue项目】this.$router.go(-1)返回跳转到系统首页（问题解决）
辰兮要努力
10-23 1万+
【辰兮要努力】：hello你好我是辰兮，很高兴你能来阅读，昵称是希望自己能不断精进，向着优秀程序员前行！ 博客来源于项目以及编程中遇到的问题总结，偶尔会有读书分享，我会陆续更新Java前端、后台、数据库、项目案例等相关知识点总结，感谢你的阅读和关注，希望我的博客能帮助到更多的人，分享获取新知，大家一起进步! 吾等采石之人，应怀大教堂之心，愿大家奔赴在各自的热爱里… 文章目录一、业务场景二、拓展提升 一、业务场景 hello本期简单总结一下vue项目中遇到的点击返回按钮跳首页问题 业务场景：如上按.
vue3:vue-router路由的使用
米儿的博客
08-04 3万+
目前前端流行的三大框架, 都有自己的路由实现: Angular的ngRouter React的ReactRouter Vue的vue-router Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得非常容易。 目前Vue路由最新的版本是4.x版本。 vue-router是基于路由和组件的 路由用于设定访问路径, 将路径和组件映射起...
Vue3 vue-router 使用
King Saj
09-23 771
<template> <div> route <button @click="goBack">后退</button> <!-- 编程式跳转 --> <button @click="goProduct">编程式跳转</button> <!-- 声明式跳转 --> <router-link to="/serve">声明式跳转</router-lin
09 vue3 vue-router的使用
yunbabac的博客
03-03 3221
前端路由是如何做到URL和内容进行映射呢？监听URL的改变 前端路由原理 URL的hash html5的history history接口是HTML5新增的, 它有l六种模式改变URL而不刷新页面 replaceState：替换原来的路径；//浏览器不可回退 pushState：使用新的路径；//相当于压栈的操作，浏览器可回退 popState：路径的回退； go：向前或向后改变路径； forward：向前改变路径； back：向后改变路径 vue-router的使用 np.
Vue3的vue-router超详细使用
qq_52769059的博客
09-08 1万+
Vue3的vue-router超详细使用
vue项目使用$router.go(-1)返回时刷新原来的界面
热门推荐
line
11-18 4万+
在项目需求中，我们常常需要使用$router.go(-1)返回之前的页面，但是却发现，之前的界面，保持着上次跳转的状态，比如说：弹框未关闭之类的等等，。。。。。 问题如下： 界面1 ： 界面2使用$router.go(-1)返回上一次的界面 由于使用$router.go(-1)返回，导致之前的数据都保留，并未刷新原来的界面，如下：还是显示跳转前的弹框 解决方法1： 不要使用...
【VUE3使用记录】页面及路由刷新
cpsxn的博客
06-08 9539
整理工作中用到的页面刷新方式 1.provide/inject 2.router.go(0) 3.location.reload 4.重复点击菜单时刷新页面
vue3 vue-router 路由跳转
09-02
在 Vue 3 中，你可以使用 Vue Router 进行路由跳转。下面是一些基本的步骤： 1. 首先，确保你已经安装了 Vue Router。你可以通过运行以下命令来安装它： ``` npm install vue-router@next ``` 2. 在你的主文件...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值