vue2的路由

尘珩

已于 2022-05-04 09:34:36 修改

阅读量513

点赞数

文章标签： vue.js 前端

于 2022-05-02 15:32:05 首次发布

本文链接：https://blog.csdn.net/m0_58656423/article/details/124541418

版权

本文详细介绍了Vue2的路由使用，包括基本配置、嵌套路由、路由传参（query和params）、命名路由、props传参、浏览器历史记录操作、编程式路由导航、缓存路由组件以及路由守卫等关键概念，还提到了路由的history和hash模式。

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

路由

路由器

在这里插入图片描述

路由的基本使用

安装vue-router npm i vue-router@3
路由的配置
- 创建router文件夹，创建index.js文件
- import VueRouter from “vue-router”;
- new VueRouter({
  
  router:[{path:“/xxx”,component:“xxx”},{path:“/xxx”,component:“xxx”},…
  
  ]}) 这里要import组件
- 进行暴露exprot default
- 在main.js中import router文件夹
- Vue.use(VueRouter)
- 在vue里配置router属性
路由的使用
- 路由使用通过标签，进行跳转，active-class="xxx"属性为选中的样式，to属性为到达的路径
- 组件展示位置为

在这里插入图片描述

//APP components

<template>
  <div>
    <div>
      <webHeader/>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>

import webHeader from "./components/webHeader.vue"
export default {
     
components:{
     
webHeader
}
}
</script>

<style>

</style>

//webHeader component

<template>
  <div>
      <div class="linkheader">导航区
          <router-link class="namelink" active-class="active" to="/yys">阴阳师</router-link>
          <router-link class="namelink" active-class="active" to="/genshin">原神</router-link>
          <router-link ></router-link>
      </div>
  </div>
</template>

<script>
export default {
     

}
</script>

<style>
.namelink