Vue 路由跳转

最新推荐文章于 2024-07-27 11:33:23 发布

LM-mint

最新推荐文章于 2024-07-27 11:33:23 发布

阅读量427

点赞数 1

分类专栏：【Vue】

本文链接：https://blog.csdn.net/TheBestAge/article/details/88089669

版权

Vue中，路由器的实现主要通过router-view作为内容展示的容器。本文介绍了三种路由跳转方式：1) 使用`router-link`，其编译后为<a>标签；2) 利用`this.$router.push()`，在Vue组件内实现跳转；3) 使用`this.$router.replace()`，不增加历史记录，直接替换当前页面。

摘要由CSDN通过智能技术生成

Vue中router-view实现路由内容的地方。router-view可以看做是一个容器，它所渲染的组件是使用vue-router指定。router-view在哪里引入组件就会在哪里显示。

路由跳转的三种方式

一、router-link

语法：<router-link to=“跳转页面的路径”>
在编译之后，<router-link>会被渲染为<a>标签，to会被渲染为href

<router-link to="home"></router-link>

在src/router/index.js文件中引入要跳转的路径：

export default new Router({
  routes: [
  ...
    {
      path:'/home',
      name:'home',
      component: () => import('@/view/home/home.vue')
    }
  ]
})