vue路由的使用

一、什么是路由？

路由器主要维护的是一个映射表；映射表会决定数据的流向；

前端路由: 就是一组key-value的映射(通俗的讲:就是一个url与组件/function的映射)

前端路由器: 管理多个路由的,就称为路由器

 

二、路由器的基本使用

（1）安装vue-router插件

# npm安装
         npm i vue-router
#yarn安装
         yarn add vue-router

 （2）在src目录下创建router目录,再在router目录下创建一个index.js(该文件用于创建整个应用的路由器)

（3） 在main.js文件中使用vue-router

//引入vue-router
        import router from './router'

//使用VueRouter
        createApp(App).use(router).mount('#app')

（4） 在router目录下的index.js文件创建路由器对象,并进行相关的路由规则的设置

//引入函数
import { createRouter,createWebHistory } from 'vue-router'
//引入组件
import Home from '../components/Home'
import About from '../components/About'
const routes = [
    //配置路由规则  
    {   
        path:'/home',
        component:Home
    },
    {   
        path:'/about',
        component:About
    },
]
//创建路由器实例并传递 `routes` 配置
const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    routes
  })

  //导出router
export default router

(5)编写Home和About组件

<template>
    <div>
        <p class="lead">About内容...</p>
    </div>
</template>

<script>
export default {
    name: 'About',
};
</script>

Home.vue

<template>
    <div>
        <p class="lead">Home内容...</p>
    </div>
</template>

<script>
export default {
    name: 'Home',
};
</script>

 (6)编写App.vue

<template>
  <nav class="nav">
      <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
      </ul>
  </nav>
  <div style="margin-top: 60px;">
     <!--组件内容展示区域-->
      <router-view></router-view>
  </div>
</template>

<script>
import Home from './components/Home.vue'
import About from './components/About.vue'
export default {
  name: 'App',
  data() {
    return {
    };
  },
  components: {
    Home,
    About,
  },
};
</script>
<style lang="css" scoped>
  li{
    list-style-type: none;
  }
  .nav{
    height: 50px;
    line-height: 50px;
    background-color: #999;
  }
  .nav ul{
    display: flex;
  }
  .nav ul li{
     margin-right: 20px;
     display: flex;
  }
 .active{
      background-color : skyblue;
      padding:0px 10px;
      color: #FFF;
   }
</style>

(7)使用router-link替换App.vue中的<a>标签  

<li class="active"><router-link to="/home">Home</router-link></li>
 <li><router-link to="/about">About</router-link></li> 

(8)使用router-view替换组件内容展示区

 

(9)测试

 

三、路由的默认路径

       默认情况下, 进入网站的首页, 我们希望<router-view>渲染首页的内容,但是我们的实现中, 默认没有显示首页组件, 必须让用户点击才可以,为了让路径默认跳到到首页, 并且<router-view>渲染首页组件，我们在routes中又配置了一个映射：

• path配置的是根路径: /

• redirect是重定向, 也就是我们将根路径重定向到/home的路径下, 这样就可以得到我们想要的结果了

 {   
     //路由默认路径
     path:'/',
    redirect:'/home'
 }

 

注意:

1. 在实际开发中,我们会把组件分为两类, 一类是路由组件,一类是普通组件, 我们会把普通组件放在components目录下, 而路由组件则放在views或者pages目录下

2. 通过调用 app.use(router)，我们可以在任意组件中以 this.$router 的形式访问它，并且以 this.$route 的形式访问当前路由。this.$router 与直接使用通过 createRouter 创建的 router 实例完全相同。