CSDN博文中实现点击文字超链接跳转新页面

实现超链接跳转新页面的方式

1、CSDN中的编辑器自带的超链接操作

  使用编辑器上方工具栏中的超链接工具,点击超链接按钮,之后输入需跳转的网址就会生成一段这样的格式:[里面是内容](里面是网址),中括号中写入你要标记的内容,小括号里写入网址。示例如下

  示例:

	[跳转百度](https://www.baidu.com)

  效果:

跳转百度

  注意:超链接标注的文字内容不可以放在加了段落标签<p>的内容中间(因为要让标签在内容中显示出来所以我用了全角模式书写,用半角模式书写才实现分段),不然超链接会失效。

  段落中失效的效果:[跳转百度](https://www.baidu.com)

  

2、使用HTML标签中的超链接标签

  这用方式解决了编辑器自带的超链接功能不能放在段落中的缺点,该方式的编写格式的示例如下:

  示例:

	<a href="https://www.baidu.com" target="_blank">跳转百度</a>

  不在段落中的效果:

跳转百度

  在段落中的效果:跳转百度

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
在 Vue.js ,可以使用 `vue-router` 库来实现页面跳转和路由管理。`vue-router` 是 Vue.js 官方的路由管理器,可以方便地实现单页面应用程序(SPA)的路由管理和页面跳转,同时也提供了丰富的路由功能。 下面是实现页面跳转的基本步骤: 1. 安装 `vue-router` 库。在终端执行以下命令: ``` npm install vue-router --save ``` 2. 创建路由实例。在 `src` 目录下创建一个名为 `router.js` 的文件,并在文件定义路由实例和路由映射表。例如: ```javascript import Vue from 'vue'; import Router from 'vue-router'; import Home from './components/Home.vue'; import About from './components/About.vue'; Vue.use(Router); const router = new Router({ routes: [ { path: '/', component: Home }, { path: '/about', component: About } ] }); export default router; ``` 这里的 `routes` 定义了路由映射表,其的每个对象表示一个路由规则。例如,第一个路由规则表示访问根路径时使用 `Home` 组件。 3. 在根组件使用路由。在根组件,需要使用 `router-view` 组件来呈现路由组件。同时,还需要使用 `router-link` 组件来实现页面跳转。例如: ```html <template> <div> <router-link to="/">Home</router-link> <router-link to="/about">About</router-link> <router-view></router-view> </div> </template> <script> export default { name: 'App' } </script> ``` 这里的 `router-link` 组件表示一个链接,用于跳转到指定的路由。例如,第一个 `router-link` 表示跳转到根路径,第二个 `router-link` 表示跳转到 `/about` 路径。而 `router-view` 组件表示路由组件的容器,用于呈现当前路由对应的组件。 4. 在入口文件挂载路由。在入口文件 `main.js` ,需要将路由实例挂载到 Vue 实例。例如: ```javascript import Vue from 'vue'; import App from './App.vue'; import router from './router'; new Vue({ router, render: h => h(App) }).$mount('#app'); ``` 这里的 `router` 表示路由实例,`App` 表示根组件,`$mount('#app')` 表示将根组件挂载到 `index.html` 文件的 `#app` 元素上。 至此,就完成了基本的页面跳转和路由管理。当访问不同的路径时,`router-view` 组件会根据路由规则呈现不同的组件。而当点击 `router-link` 组件时,会跳转到指定的路径,并呈现对应的组件。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值