vue中的路由使用

最新推荐文章于 2025-06-29 22:18:35 发布

原创最新推荐文章于 2025-06-29 22:18:35 发布 · 737 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#router-link #VUE中的路由

Vue 专栏收录该内容

21 篇文章

订阅专栏

博客对VUE中的路由进行了通俗易懂的解释，指出路由类似HTML里的a标签，只是按vue规则传参。还举例说明在脚手架搭建的项目中，可在router文件夹配置组件跳转，如在Hostory.vue中点击按钮跳转到下一页。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.什么是路由，相信很多新手很蒙，网上一大片什么东西，看了也是很不懂，都是照着别人的写，
最通俗易懂的就是路由，其实就是我们html里面的a标签，点击跳转，
只不过换个方式写标签而已，按照vue的规则来传参数而已，

我的了解就是这样的，错的地方请大佬指点，

举个例子

在我们用脚手架搭建的项目中都有这个一个文件夹router

index.js中

import Vue from 'vue'
import Router from 'vue-router'
import Hostory from '@/components/Hostory'
import Myhome from '@/components/Myhome'
//上面是你自己定义的组件

Vue.use(Router)

export default new Router({
//下面就是要跳转的地址，
  routes: [
    {
      path: '/',
      name: 'Hostory',
      component: Hostory
    },
    {
      path: '/myhome',
      name: 'Myhome',
      component: Myhome
    }
  ]
})

比如在Hostory.vue中有个按钮点击要跳转到下一个页面

<template>
  <div>
      <p>
         <router-link :to="{ path: '/myhome' }">Home</router-link>
      </p>
  </div>
</template>
<script>
export default {
  name: 'Hostory',
  data () {
    return {
     
    }
  },
  methods: {
      
    },
  created:function(){
    
  },
}
</script>

<style scoped>

</style>

不管你项目中有多少个组件都直接在这里面配置好引入进来即可

至于要怎么残敌参数，网上太多了，这里像说明的是什么是路由，搞懂这个意思，别了解的太深奥了