vue-router的router-link详解

<router-link>

<router-link> 组件支持用户在具有路由功能的应用中 (点击) 导航。 通过 to 属性指定目标地址,默认渲染成带有正确链接的 <a> 标签,可以通过配置 tag 属性生成别的标签.。另外,当目标路由成功激活时,链接元素自动设置一个表示激活的 CSS 类名。

<router-link> 比起写死的 <a href="..."> 会好一些,理由如下:

  • 无论是 HTML5 history 模式还是 hash 模式,它的表现行为一致,所以,当你要切换路由模式,或者在 IE9 降级使用 hash 模式,无须作任何变动。
  • 在 HTML5 history 模式下,router-link 会守卫点击事件,让浏览器不再重新加载页面。
  • 当你在 HTML5 history 模式下使用 base 选项之后,所有的 to 属性都不需要写 (基路径) 了。

示例代码:

字符串形式,会默认在当前路由下给字符串前面加

<router-link to='propsView'>字符串形式One</router-link><br>
<router-link :to="{path: 'propsView', query: {id: 1}}" replace>字符串形式Two</router-link><br>

路径形式 

<router-link to='/test/propsView'>路径形式One</router-link><br>
<router-link :to="{path: '/test/propsView'}">路径形式Two</router-link><br>

命名的路由 

<router-link :to="{name: 'test', params: {userId: 123}}">跳转至test路由</router-link><br>

想要 <router-link> 渲染成某种标签,例如 <li>。 于是我们使用 tag prop 类指定何种标签, 同样它还是会监听点击,触发导航。默认值: "a"

<router-link :to="{name: 'test'}" tag="li">渲染成li标签</router-link><br>

设置 replace 属性的话,当点击时,会调用 router.replace() 而不是 router.push(),于是导航后不会留下 history 记录。 

<router-link :to="{name: 'test'}" replace>replace导航后不会留下 history 记录</router-link>

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue Router 是 Vue.js 的官方路由管理器,它与 Vue.js 紧密集成,可以让我们轻松地构建单页面应用(SPA)。 在使用 Vue Router 构建单页面应用时,我们通常会使用 `<router-view>` 组件来展示当前路由所对应的组件内容。下面是对 `<router-view>` 组件的使用详解: 1. 定义路由: 在 Vue Router 中,我们需要首先定义路由。可以通过在 `routes` 配置项中定义一个数组来实现,每个路由对象都包含了一个路径和对应的组件。例如: ```javascript import Home from './components/Home.vue' import About from './components/About.vue' const routes = [ { path: '/', component: Home }, { path: '/about', component: About } ] ``` 2. 注册路由: 在创建 Vue 实例之前,我们需要将路由配置注册到 Vue 实例中。可以使用 `Vue.use()` 方法来注册 Vue Router 插件。例如: ```javascript import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) ``` 3. 创建路由实例: 在注册完插件后,我们可以创建一个路由实例,并将之前定义的路由配置传入。例如: ```javascript const router = new VueRouter({ routes }) ``` 4. 添加路由占位符: 在应用的根组件中,我们需要添加一个 `<router-view>` 组件作为路由占位符。这样,当路由切换时,对应的组件就会渲染在这个占位符中。例如: ```html <template> <div> <router-view></router-view> </div> </template> ``` 注意,`<router-view>` 组件可以放置在任何位置,根据实际需求进行布局。 5. 挂载路由: 最后一步是将路由实例挂载到 Vue 实例上。例如: ```javascript new Vue({ router }).$mount('#app') ``` 至此,我们就完成了 `<router-view>` 组件的使用。当用户访问不同的路由时,对应的组件就会被渲染到 `<router-view>` 中,实现了页面的切换效果。 需要注意的是,`<router-view>` 组件只能用于展示路由对应的组件内容,并不能直接显示其他内容。如果需要在路由切换时显示一些其他元素,可以结合使用 `<router-link>` 组件来实现。 希望以上解答对你有帮助!如有其他问题,请随时提问。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

wflynn

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值