前言

Vue配合Vue Router时，常用于构建单页面应用。Vue Router是一个官方支持的路由管理器，它能够配合Vue无缝实现页面之间的导航和组件切换，而不需要重新加载整个页面，这正是单页面应用的特点。

正文

安装Vue与Vue Router

在终端输入npm create vue@latest，输入项目名称，按回车，在是否引入 Vue Router 进行单页面应用开发中选择是，一路按回车，一个vue项目就创建好啦。

打开创建好的vueRouter项目，项目列表如下所示。

接着在vueRouter项目按住右键，点击在集成终端中打开，输入指令npm i，安装依赖包。

最后输入指令npm run dev，开启项目，会出现一个Local链接，ctrl + 单击打开就可以看到我们刚刚创建的vue页面。

如果你跳转的页面如下所示，那说明你已经创建好一个vue项目了。

用Router实现一个小demo

接下来用路由来实现一个小demo，

动画3.gif

创建项目如下所示。

实现一级路由

在router中的index.js中配置路由，定义routers数组，export default router抛出路由。

import { createRouter, createWebHistory } from "vue-router";

const routes = [

];

const router = createRouter({
  history: createWebHistory(),
  routes: routes,
});

export default router;

抛出路由后要让其生效，要将其植入到vue项目中去，在main.js中引入路由import router from './router'，接着createApp(App).use(router).mount('#app')使用router。到这里就已经在 vue项目中引入路由了。

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

接着在App.vue中创建一个导航栏，里面包含 首页 | Bot | 沸点，代码如下所示。

<router-link to="/"> 标签是路由中提供的一个全局组件，用于跳转标签，这里面必须要写属性 to="/" 用于指定链接的目标地址，类似于 HTML 中的 <a> 标签。<router-view>标签是路由入口，所有配置了路由的代码片段都可以在这里面展示。

<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>

创建三个页面，在src文件夹中创建pages文件夹，在其创建Bot.vue，Home.vue，Hot.vue。这里只举例Hot.vue，其他几个也是这样，里面写上相关的内容即可。

<template>
    <div>
        沸点 page
    </div>
</template>

接下来要在router中的index.js中配置路径，在数组routes中放一个对象，对象中包含path和component。当url地址栏为'/home'时，可以将对应的组件Home.vue显示出来。

到这里就成功完成了一级路由跳转。

动画4.gif

实现二级路由

在首页Home.vue中再添加最新 和 推荐，创建一个home文件夹，在这里面放入Newest.vue和Suggest.vue，添加路由入口<router-view></router-view>，将最新和推荐中的内容放到首页展示。

在这里，首页、沸点和Bot是整个页面的一级页面，最新和推荐是首页的二级页面。

<template>
    <div>
        <h2>home page</h2>
        <div class="nav">
            <router-link to="/home/newest">最新</router-link> |
            <router-link to="/home/suggest">推荐</router-link>
        </div>

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

Newest.vue代码如下。Suggest.vue代码一样只是里面的内容为推荐的文章。

<template>
    <div>
        最新的数据
    </div>
</template>

现在就要给这这两个组件配置路由了，这个路由属于二级路由，来到router中的index.js，在父路由中添加一个children数组，里面照样放对象，其中的redirect表示路由的重定向，当浏览器来到首页时，会直接展示推荐页面 /home/suggest。

到这里二级路由就配置好啦。

动画5.gif

用JS实现跳转页面

在Bot.vue中添加一个按钮，可以去到沸点页面。首先要从路由中引入一个辅助函数useRouter，定义变量router = useRouter()，可以得到一个路由对象，在toHot函数中添加代码router.push('/hot')就可以实现跳转到沸点页面。使用router.push({path: '/hot', query: {id: 1}})，可以携带参数，表示点击去沸点按钮，可以去到沸点页面并且携带一个参数id值为1。

<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>

到这里，小demo就全部实现啦。

结语

今天的分享就到这里啦，希望可以给你带来帮助，附上学习路由的官方文档 Vue Router官方文档，适合从入门到进阶的各种需求。

构建你的第一个Vue Router单页面应用

前言

正文

安装Vue与Vue Router

用Router实现一个小demo

实现一级路由

实现二级路由

用JS实现跳转页面

结语