前言

(router.vuejs.org/zh/introduc…) VueRouter 是Vue.js的官方路由。专门用于构建单页面应用的导航和路由控制。它可以允许开发者定义应用程序的路由，也就是不同的页面与用户界面中的组件之间的映射关系。通俗来讲，ue中所有的xxx.vue 文件都是一个组件，这些组件最终会被vue读取，并编译成一段div结构，挂载在唯一的html文件中，所以，想要实现组件之间的切换很简单，但是，想要将某些组件当成页面（每个页面对应的url都是唯一的）来用，默认情况下就行不通，但是，想要将某些组件当成页面（每个页面对应的url都是唯一的）来用，默认情况下就行不通。

命令行创建Vue项目

使用命令行创建一个vue项目，这一点在上一篇文章《利用Vue的组件化实现简单购物车》（juejin.cn/post/738508… ）中已经为大家介绍了，下面我们依旧是打开我们Vscode的终端输入指令

这样我们就下载好了VueRouter的依赖了。

对接Router

我们在src文件夹下创建一个router文件夹，在router文件夹下创建一个index.js文件来写一些基本配置，

我们先看第一个createRouter,这是一个函数体，它可以实例出一个路由对象。

这里我们实例化对象，在该对象中必须传入一个实参对象，且必须存放两个键值对，一个是history,一个是routes. history是指HTML5的模式。其内置了两种模式history模式以及hash模式，这里我们采用history模式。routes中的值，我们可以自定义一个数组即可。最后不要忘了抛出路由，让App.vue对接上。来到src文件夹下的main.js中，来对接一下router,我们使用import将router引入进来

最后实现对接

这样我们就完成了Router对接

页面搭建

在App.vue中我们写一个简单的导航栏

<template>
  <div>
    <nav>
      <router-link to="/home">首页</router-link>|
      <router-link to="/bot">BOT</router-link>|
      <router-link to="/hot">沸点</router-link>
    </nav>
    <!-- 页面 -->
    <!-- 路由路口 -->
    <router-view></router-view>
  </div>
</template>

各位看官看到router-link以及router-view,是不是不知道这样玩意，别急，现在我就给您们介绍一下这两个玩意，router-link是编程式导航跳转，类似于a标签，但是router-link需要接一个to='/xx',如果各位学过JavaWeb的话可能就会比较好理解了，这个to就是指向于某个页面的路径了，而router-view是路由路口，配置了路由路口的代码片段就会被展示在这里. 我们导航栏有三个链接，所以我们需要写三个Vue文件，分别是Bot.vue,Home.vue,Hot.vue.使用快捷“vb3s”生成内容后，我们就要开始把三个组件的path写好了。回到index.js中我们创建了一个数组routes,在数组里面我们就把导航栏的路径写好

import Home from '../pages/Home.vue'
import Bot from '../pages/Bot.vue'
import Hot from '../pages/Hot.vue'

const routes = [

    {
      path: '/home',
      component: Home,
    },
    {
      path: '/bot',
      component: Bot
    },
    {
      path: '/hot',
      component: () => import('../pages/Hot.vue')
    }
  ]

这就是基本的路径了，这时就会有人注意到了，为什么在路径为'/hot'他我component就是箭头函数，其他的都是用import导入的呢，正常写法，是我么需要把相应的vue组件导入进js文件中，但是呢我们也可以把import当成箭头函数使用，这样就简写了代码，效果也是一样的。这里的三个path所指的路径是不是就对应上了导航栏中to所指的路径，当你点击对应的router-link 它的to指向哪个路径，这个路径的vue组件就会展示在router-view里面。上面这些路径，也被称为一级路由。下面给大家展示一下二级路由，其实二级路由就是一级路由下的一个新的路由

const routes = [
    // 重定向 当去到根路径下，就会重定向去到home
    {
      path: '/',
      redirect: '/home'
    },
    {
      path: '/home',
      component: Home,
      children: [
        {
          path: '/home',
          redirect: '/home/suggest'
        },
        {
          path: '/home/newest',
          component: () => import('../pages/home/Newest.vue')
        },
        {
          path: '/home/suggest',
          component: () => import('../pages/home/Suggest.vue')
        }
      ]
    },
    {
      path: '/bot',
      component: Bot
    },
    {
      path: '/hot/:id',
      component: () => import('../pages/Hot.vue')
    }
  ]

我们看这串代码

在'/home'里面写了一个children新的数组，来存放一个新的路由，其实二级路由就是一个写在一级路由下面的一个新的路由，有点类似于多维数组，一个数组中，再写一个数组，就是二维数组了。那么这又是什么

这是设置了一个重定向，当我们回到跟路径'/'下，就会自动跳转到'/home'路径下，你可以理解为默认展示'/home',就像在二级路由下，默认展示路径为'home/suggset'一样的。

在Bot页面，我们介绍一个在VueRouter中的另一种跳转路由的方法"useRouter"

<template>
    <div>
      <p>BOT page</p>
      <button @click="toHot">去沸点</button>
    </div>
  </template>
  
  <script setup>
  // 跳转路由
  import { useRouter } from 'vue-router'
  
  const router = useRouter()
  
  const toHot = () => { 
    // 跳转到沸点页面
    // router.push('/hot')
    router.push({ path: '/hot', query: {id: 1} })
  }
  
  </script>

我们实例化一个router对象，在按钮上绑定一个点击事件，当点击按钮就会触发函数toHot(),在toHot()函数中，我们调用了useRouter中的push方法，这里我们传入一个对象，参数为path：'/hot',query:{id:1}这个id可以很好地帮助我们在Hot页面识别，是从哪一个页面跳转到Hot页面的。所以我们在'/hot'路径也有一些修改，把'/hot'改成'/hot/id:',这样我们在页面的url部分就可以看到id了

感谢各位大佬的观看，若有不足，敬请指出。

浅聊一下VueRouter

前言

命令行创建Vue项目

对接Router

页面搭建