(Angular8)为什么点击事件转到路由'/#'？

Angular是一种流行的前端开发框架，Angular 8是其最新版本。在Angular中，当我们使用路由导航时，可以通过点击事件将用户导航到指定的路由。在这个问题中，点击事件转到路由'/#'的原因是为了实现单页应用（Single-Page Application，SPA）的路由导航。

单页应用是一种Web应用程序的架构模式，它在加载初始页面后，通过动态地更新页面的部分内容来实现用户与应用程序的交互，而不是每次用户操作都重新加载整个页面。为了实现这种无刷新的页面更新，单页应用使用前端路由来管理不同页面之间的切换。

在Angular中，路由器会监听URL的变化，并根据URL的路径来加载相应的组件。默认情况下，Angular的路由器使用HTML5的路由模式，即路径中不包含'#'符号。但是，为了支持旧版浏览器的兼容性，Angular也提供了Hash路由模式，即路径中包含'#'符号。

当我们使用Angular的路由器进行导航时，如果没有显式地指定路由模式，Angular会根据浏览器的支持情况自动选择路由模式。如果浏览器不支持HTML5的路由模式，Angular会自动切换到Hash路由模式，并在URL中添加'#'符号。

因此，当点击事件转到路由'/#'时，说明浏览器不支持HTML5的路由模式，Angular自动切换到了Hash路由模式，以确保路由导航的正常工作。

推荐的腾讯云相关产品：腾讯云云服务器（https://cloud.tencent.com/product/cvm）和腾讯云云数据库MySQL版（https://cloud.tencent.com/product/cdb_mysql）。

请注意，本回答仅代表个人观点，不涉及任何特定品牌或商业推广。

相关·内容

小程序点击A页面跳转到B页面对应事件

下面的内容主要是总结一下小程序点击A页面跳转到B页面对应事件。效果描述：小程序点击A页面的“通知公告”板块，跳到B页面的“通知公告”tab栏。...以前我的做法是写出每个小块再分别添加点击事件，因为用来for循环能写出静态页面，但是里面的事件不知道怎么分别加上去，其实很简单。...只要点击方法里面加个item，再写这个方法的时候带e这个参数，里面加判断条件，就能达到你想要的。...props它是代表从A页面接收过来，让B页面的导航等于A页面的点击方块。

991 0

使用Angular8和百度地图api开发《旅游清单》

前言：本文的目的是通过一步步实现一个旅游清单项目，让大家快速入门Angular8以及百度地图API。...3.angular基本语法和架构 1.基本语法和vue类似，ng的基本语法如下：模版语法数据指令属性绑定事件绑定案例如下： {{title}} 单机复制代码以上代码可以知道，我们用{{}}插入数据，用[属性名]绑定属性，*ngFor为循环指令，类似的*ngIf为条件判断,事件绑定用...} from '@angular/core'; @Injectable({ providedIn: 'root' }) export class Storage {} ``` 复制代码路由.../newMap'; // 路由不能以‘/’开始 const routes: Routes = [ { path: '', component: HomeComponent }, { path:

6K3 0

前端路由三种模式原理

如不传该项,即给当前url添加data popstate事件会在点击后退、前进按钮(或调用history.back()、history.forward()、history.go()方法)时触发。...history.replaceState state：与要跳转到的URL对应的状态信息。 title：不知道干啥用，传空字符串就行了。 url：要跳转到的URL地址，不能跨域。...Hash模式 hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件: window.onhashchange = function(event){ /...更关键的一点是，因为hash发生变化的url都会被浏览器记录下来，从而你会发现浏览器的前进后退都可以用了，同时点击后退时，页面字体颜色也会发生变化。...Vue对比两种模式已经有 hash 模式了，而且 hash 能兼容到IE8， history 只能兼容到 IE10，为什么还要搞个 history 呢？

9503 0

Flutter 中路由返回的多种方式

需要注意的是，要跳转到的目标页面组件必须在顶部引入。 4. 路由跳转实例项目结构： ?..._currentIndex, // 点击事件,获取当前点击的标签下标 onTap: (int index){...floatingActionButton: FloatingActionButton( child: Text('返回'), // 点击事件..."), // 点击事件 onPressed: () { Navigator.pushNamed..."), // 点击事件 onPressed: () { // 跳转路由传值

2.2K2 0

Flutter中路由返回的多种方式

替换路由 Navigator.of(context).pushReplacementNamed('目标页面路由'); 当页面中跳转顺序是A页面-B页面-C页面，如果在B页面中使用上面这个命令跳转到C页面..._currentIndex, // 点击事件,获取当前点击的标签下标 onTap: (int index){...floatingActionButton: FloatingActionButton( child: Text('返回'), // 点击事件..."), // 点击事件 onPressed: () { Navigator.pushNamed..."), // 点击事件 onPressed: () { // 跳转路由传值

1.3K2 0

vue通信、传值的多种方式（详细）

Vue通信、传值的多种方式，详解（都是干货）：一、通过路由带参数进行传值 ①两个组件 A和B,A组件通过query把orderId传递给B组件（触发事件可以是点击事件、钩子函数等） this....eventBus.emit事件 ③接收传递过来的数据注意：enentBus是一个另一个新的Vue实例，区分两个this所代表得vue实例五、vuex进行传值 为什么使用vuex?...，点击修改餐馆的名称，并把餐馆的名称在事件中用参数进行传递。...$router.push({path: '/componentsB'}) // 路由跳转到B } }, computed: { ...mapGetters(['resturantName...$router.push({path: '/componentsA'}) // 路由跳转到A } }, computed: { ...mapGetters(['resturantName

8872 0

微信小程序：报错(in promise) MiniProgramError {“errMsg“:“navigateTo:fail can not navigateTo a tabbar page“}

，跳转到应用内的某个页面。...解决办法：只需在js文件的点击事件中，配置跳转的url地址与tabbar中的跳转地址不一样就ok....我就简单说一下我用navigateTo方式实现的小程序路由跳转过程 1.触发一个点击事件 2.在js文件中设置路由跳转 // 路由跳转...大家也可以去了解一下其他的路由跳转方式其他路由的一些简单介绍： wx.navigateTo() 带历史回退,不能跳转到tabbar页面 wx.redirectTo() 不保留历史，跳转到另一个页面...$router.replace() wx.switchTab() 只跳转到tabBar页面，不带回退 wx.reLaunch() 即能跳转到tabBar页面，也能跳转到非tabBar页面，不带历史回退

2.9K1 0

vue组件之间的传值通信(vue props 对象默认值)

1.9K3 0

【Flutter 实战】路由堆栈详解

push 和 pop 假设现在有2个页面 A 和 B，A中有一个按钮，点击跳转到 B 页面，A 页面代码： class APage extends StatelessWidget { @override...当应用程序位于A页面时，路由堆栈中只有A，点击按钮跳转到B页面，路由堆栈中有 B 和 A，且 B 处于栈顶。 ?...点击 B 页面的按钮返回到 A 页面，修改 B 页面按钮点击事件： RaisedButton( child: Text('B 页面'), onPressed: () { Navigator.of...修改 B 页面按钮点击事件： RaisedButton( child: Text('B 页面'), onPressed: () { Navigator.of(context).push(...从 C 页面跳转到 D 页面路由堆栈变化： ?

1.3K3 0

SAP UI5 应用 manifest.json 文件里 Routes 数组元素的相对顺序，不可忽视的试读版

Hi,Jerry，我在复刻这个篇章的代码的时候遇到了一个问题：在mainfest.json文件中配置routes时，若把该篇的新的路由路径写在最后，点击Home对应的按钮会跳转到Employee视图去...简要回顾步骤 77 完成的开发内容在步骤 77，我们在 UI 上增添了一个新按钮：这个按钮的事件响应函数：this.getRouter().navTo("employeeOverview") 这个...点击 Show Employees Overview 按钮之后，SAP UI5 路由框架从 manifest.json 文件 routes 区域解析出的记录里，找到路由 target，即上图高亮区域所示的配置信息...在 77-A 文件夹里执行命令行 ui5 serve, 点击 Show Employee Overview 按钮，会发生什么事情？...最后显示的内容变成了 404 Not found 依次加载的 XML 视图文件如下： 为什么会出现这种奇怪的现象？本文通过 SAP UI5 路由框架的实现原理，做出了深入的分析。

5454 0

navigateTo:fail page pagesgoodsDetailsjavascript:void(0); is not found

在vue.js项目转化到mpvue的小程序项目的过程中，执行事件时，报了如下图所示的错误: ?...a href="javascript:void(0);" >立即购买原因是:用a标签时，用到了href="javascript:void(0);"，在vue.js有路由进行跳转...为什么要使用href=”javascript:void(0);”？ javascript:是伪协议，表示url的内容通过javascript执行。...void(0)表示不作任何操作，这样会防止链接跳转到其他页面。这么做往往是为了保留链接的样式，但不让链接执行实际操作。...=”#"的区别点击点击链接后不会回到网页顶部点击点击后会回到网面顶部 "＃"其实是包含了位置信息，

8792 0

vue系列教程之微商城项目|商品详情

问题描述页面注册 1.在secondary中,新建商品详情页shopDetail.vue 2.在路由配置页面router/index.js中，注册该页面的路由 3.监听商品列表页的商品点击事件，当点击后携带数据跳转到商品详情页...4.需要注意的是，这种获取方式数据，并渲染到页面上时，页面始终只显示最开始渲染的数据，也就是点击第一个商品，显示第一个商品的数据，点击第二个商品还是显示第一个商品。...原因：所有路由对应页面的显示都是在App.vue中的标签内，这个标签对于路由会采取缓存策略，也就是说只有路由不同时才会刷新页面组件，但我们所有的商品点击事件都是跳转到商品详情页...，都是同一个路由，只是路由后面跟的值不同。...2.动态显示底部导航栏方案：在App.vue中通过watch监听当前路由对象$route的变化，当页面跳转到商品详情页'/shopDetail'时，给导航栏设置v-show，让其隐藏.

4.2K2 0

遥遥领先,HarmonyOS的ArkTS应用入门实操

点击侧边栏的 Previewer 即可看到入口文件构建出来的页面样式事件给我们的 HelloWorld 添加一个事件,这和 JavaScript 一模一样没啥区别认识 ets 初始代码我们查看一下...，点击时跳转到第二页 .onClick(() => { console.info(`开始跳转`) }) .margin({...@ohos.router (页面路由) 本模块提供通过不同的url访问不同的页面，包括跳转到应用内的指定页面、用应用内的某个页面替换当前页面、返回上一页面或指定的页面等 ⚠️ 页面路由需要在页面渲染完成之后才能调用...// 跳转按钮绑定onClick事件，点击时跳转到第二页 .onClick(() => { console.info(`开始跳转`) // 跳转到第二页 router.pushUrl...// 跳转按钮绑定onClick事件，点击时跳转到第一页 .onClick(() => { console.info(`开始跳转`) // 跳转到第二页 router.pushUrl({

1.4K12 2

【手写VueRouter】-手撕Vue-Router-初始化路由信息

那么就会遇到几个问题，就是怎么监听，怎么保存，我们先回到 VueRouter 的官方文档，点击右上角的 API 参考，然后拖动到底部，在底部找到组件注入，当中的注入的属性：其实我们在使用 VueRouter...在 initDefault 方法中，首先根据当前的 mode 也就是路由模式来进行走不同分支的逻辑代码，如果是 hash 模式，那么我们就需要监听 hashchange 事件，如果是 history 模式...，那么我们就需要监听 popstate 事件。...然后我们看看界面的地址栏，发现有 hash，就不用管了:接下来我们测试第二步，监听 hashchange 事件，我们在 hashchange 事件中打印了 NueRouterInfo 的实例，看看有没有保存当前的路由地址...，我们分别点击首页和关于，打印结果如下：好了，hash 模式的测试就完成了，关于 history 模式需要编写的代码比较多，我这里就不带着大家一起来验证了，因为他们两个都是同一个世界同一个梦想的。

1552 0

Jetpack Compose之在Compose中使用Navigation导航

"这是页面1") Spacer(modifier = Modifier.height(20.dp)) Button(onClick = { //点击跳转到页面..."这是页面1") Spacer(modifier = Modifier.height(20.dp)) Button(onClick = { //点击跳转到页面...navController.navigate方法，传入页面2的路由地址，这样就可以跳转到页面2了。...1按钮，效果如下图所示：如此一来就实现了从页面1到页面2的传参，如果我们在页面1的点击事件中少传一个参数，会怎么样呢？...age={age}”，由于可选参数必须要设置一个默认值，这里设置年龄的默认值为30，现在在页面1的点击事件中不再传递年龄参数 navController.navigate("${RouteConfig.ROUTE_PAGETWO

1.7K2 0

Vue之Router（一）

/router' new Vue({ el: '#app', router, render: h => h(App) }) 关于这里有必要解释一下，为什么导入路由的路径是 ....但是得要有东西来触发它们真正起作用，所以就涉及到另外两个重要的标签： router-link 和router-view **① router-link：**是vue-router 中已经注册过多的组件，其功能类似于a标签，点击到文字就跳转到相应的页面...就会跳转到 “/home” 路径下的文件，以此类推。...下面就为大家分享路由跳转的进阶版本--代码跳转 1.基本思路代码跳转的思路很简单，通过添加事件，然后在对事件处理的methods方法中添加属性：this....$router 即可，具体见下面代码： 2.使用流程 ① 绑定事件绑定事件的对象是需要路由跳转的地方，比如点击 “首页” 就跳转到 “/home”页面 <button @click="homeClick

8841 0

Vue之Router（二）

一、动态路由 1.产生背景 为什么会有动态路由呢？...三、路由的嵌套使用 1.产生背景嵌套路由的产生是因为在一个页面中，可以将不同功能的部分进行划分，组成小的组件，然后点击相应的链接就会跳转到相应的内容。...上面的例子中，当用户点击的“档案” ，跳转到“档案”页面时，该页面的URL就会显示 query 对象传递过去的参数。比如：同理，如果我们想要将 URL 中的信息拿到页面中该怎么办呢？...-- 1.将router-link 转换成button 标签并添加点击事件 --> 首页 <button...$route.params.userID } }, //绑定点击事件 methods:{ HomeClick(){ this.

7042 0

：第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制

那么，为什么会在单页面应用中存在这么一个概念，以及，前端路由与我们后端的路由有什么异同呢。...例如，在某些情况下，我们需要定位页面上的某些位置，就像下面的例子中展现的那样，我想要通过点击不同的按钮就跳转到指定的位置，这里我们使用的锚点定位其实就是 hash。...而 history 路由则是使用了 html5 中新增的 pushState 事件和 replaceState() 事件。　　...同样的，它还是会监听点击，触发导航。　　...同时，我们可以发现，在 account 组件中又包含了两个子路由，通过点击 account 组件中的子路由地址，从而加载对应的 login 组件和 register 组件。

1K1 0

Flutter中的基本路由使用

Flutter 中通过 Navigator 组件管理路由导航，并提供了管理堆栈的方法。常用的方法如下： 1. Navigator.push 跳转到指定页面； 2....Navigator.pop 返回上一级页面；跳转代码示例： import "package:flutter/material.dart"; // 引入要跳转到的子页面 import '....."), // 点击事件 onPressed: () { // 路由约定俗成的写法...，返回要跳转到的组件即可； Navigator.of(context).push( // 在FormPage...floatingActionButton: FloatingActionButton( child: Text('返回'), // 点击事件

9732 0

Flutter 中的基本路由使用

Flutter 中通过 Navigator 组件管理路由导航，并提供了管理堆栈的方法。常用的方法如下： 1. Navigator.push 跳转到指定页面； 2....Navigator.pop 返回上一级页面；跳转代码示例： import "package:flutter/material.dart"; // 引入要跳转到的子页面 import '....."), // 点击事件 onPressed: () { // 路由约定俗成的写法...要跳转到的子页面FormPage，并接受参数。...floatingActionButton: FloatingActionButton( child: Text('返回'), // 点击事件

1.3K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云