前端应用_Vue_vue-router 用router-link代替a 标签,设置默认的路由

之前 用 a标签 ,每次都需要在href 里面添加 #, 用router-link 可以避免。

 <router-link to='/login' tag="span">登录</router-link>
    <router-link to='/registe' tag="span">注册</router-link>

我们想设置默认路由显示指定的组建 ,可以这么做


var routerObj=new VueRouter({
routes:[
{path:’/’,redirect:’/login’},

    {path:'/login',component:tmp1},
    {path:'/registe',component:tmp2}
  ]
})

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 3的router-view和router-link是Vue Router提供的两个核心组件,用于实现路由导航和视图渲染的功能。 router-link是一个用于生成链接的组件,它会自动根据路由配置生成对应的链接,并在用户点击时触发路由跳转。你可以使用to属性指定链接的目标路由,例如to='home'表示跳转到名为home的路由。 router-view是一个用于渲染视图的组件,它会根据当前路由的路径匹配路由配置中的组件进行渲染。在你的应用中,你可以将router-view放置在合适的位置,它会根据当前路由的变化自动切换渲染的组件。 通过在Vue组件中使用router-link和router-view组件,你可以实现简单而灵活的路由导航和视图切换功能,让用户可以方便地浏览不同的页面内容。 请注意,以上是Vue 3中使用router-view和router-link的基本用法。具体的配置和使用方式可能会因你的项目需求和Vue Router的版本而有所不同。如果你遇到了具体的问题和报错,请提供更多的信息以便我能够更详细地回答你的问题。<span class="em">1</span><span class="em">2</span> #### 引用[.reference_title] - *1* [【JavaScript源代码】Vue router-view和router-link的实现原理.docx](https://download.csdn.net/download/mmoo_python/72117437)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [vue3引入vue-router无法使用router-link、router-view组件](https://blog.csdn.net/m0_67108146/article/details/125198929)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值