【JavaScript教程】Vue-router 简简单单入个门

路由

vue中所有的 xxx.vue 都是一个组件，这些组件最终会被vue读取并编译成一段div结构，挂载在唯一的html文件中，所以想要实现组件之间的切换很简单，但是想要将某些组件当成页面（每个页面对应的URL都是唯一的）来用，默认情况下行不通。那么，我们就需要一个方式可以将组件模拟成一个页面的跳转的样子，这个方式就是路由。我们就拿掘金左边的导航栏来说，其实关注和综合就是两个vue组件，当我们点击时，地址栏的URL会发生变化，这就是路由的效果。

文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/16000.html

文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/16000.html

安装

方式一

最简单直接的方法就是在项目根目录下使用npm create vue@latest命令，这条命令是创建一个vue空项目，他会使用vite构建一个初始化好的vue项目。在敲完这条命令后，他会在命令行询问我们需不需要配置一些东西，里面就有我们需要的路由配置。当我们勾选是时，他会默认下载引入vue-router模块，并且生成一些已经配置好的一些文件，这样就不需要我们自己去引入和配置了。文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/16000.html

文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/16000.html

方式二

手动下载，并且配置文件。在项目根目录下使用命令npm install vue-router@4 安装，接下来我们通过手动配置路由来详细讲解方式一到底做了些什么，方式一就是自动帮我们做了方式二的事情。文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/16000.html

快速入门

我们通过简单模仿掘金导航栏的方法来讲解文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/16000.html

1. 首先我们需要在main.js中引入路由并且将路由功能添加到 Vue 应用实例中
   javascript

   复制代码

   import router from './router'
   app.use(router)
   

   解释
2. 在APP.vue文件中使用的方法进行路由跳转

<template>
  <div>
    <nav>
      <RouterLink to="/home">首页</RouterLink>
      <RouterLink to="/bot">bot</RouterLink>
      <RouterLink to="/hot">沸点</RouterLink>
    </nav>
    <RouterView></RouterView>
  </div>
</template>

<script setup>

</script>

<style lang="css" scoped>
  nav{
    text-align: center;  
  }
  a{
    text-decoration: none;
    font-size: 25px;
    margin-left: 5px;
  }
</style>

RouterLink 它允许你在应用中定义不同路径的链接，当用户点击链接时，URL 会更新并导航到相应的视图。里面有两个重要的属性，to: 指定目标路径，可以是字符串或者对象，需要和router文件夹下的index.js路由配置文件里的path一致。replace: 如果设置为 true，点击链接后不会在浏览器历史记录中添加新记录，而是替换当前记录。文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/16000.html

RouterView 是一个占位组件，用于展示与当前路由匹配的组件。当 URL 变化时，RouterView 会动态渲染对应的组件，这个占位组件不能忘哦，否则渲染不出来。文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/16000.html

3. 在src的pages下创建home，hot，bot三个组件，这三个组件基本一致，这里只展示home组件。

<template>
    <div>
        <h2>home page</h2>
        <!-- <h2>hot page</h2> -->
        <!-- <h2>bot page</h2> -->
    </div>
</template>

<script setup>

</script>

<style lang="css" scoped>
div{
    text-align: center;  
  }
a{
    text-decoration: none;
    margin-left: 5px;
}
</style>

4. 在src下创建router文件夹，然后在router下创建index.js文件，这是路由配置的重要文件。组件的路由配置都在这里面。

import Home from "@/pages/Home.vue";
import Hot from "@/pages/Hot.vue";

import { createRouter, createWebHistory } from "vue-router";
const routes = [
    {
        path: '/home',
        component: Home,
    },
    {
        path: '/hot',
        component: Hot
    },
    {
        path: '/bot',
        component: ()=>import('../pages/Bot.vue')
    },

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

export default router

这里配置了三个路由，一个组件一个路由。首先导入模块，导入home和hot组件，@/ 是一个别名，通常指向 src/ 目录。createRouter 用于创建路由实例，createWebHistory 用于创建基于浏览器历史记录的路由模式。然后配置路由，我们通常将路由写成一个数组的方式传入路由实例中。在路由数组中，path：路由的路径，比如 /home，component：当匹配到该路径时要渲染的组件。然后将创建好的路由实例导出，以便在 Vue 应用的其他地方（如 main.js 文件）中使用，这就和我们的第一步对应上了。文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/16000.html

注意这句{ path: '/bot', component: ()=>import('../pages/Bot.vue') }：当 URL 路径为 /bot 时，动态导入并渲染 Bot.vue 组件，这种写法利用了懒加载，可以优化应用性能，而home和hot则不是。文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/16000.html

ok，接下来不出意外的话我们就可以看见效果了

二级路由

我们希望在首页下还有两个组件，分别是最新的文章和推荐的文章。实现二级路由的效果，也就是嵌套。

这样我们就需要像一级路由一样，在首页的组件中使用RouterLink和RouterView

<div class="nav">
       <RouterLink to="/home/newest">最新</RouterLink>
      <RouterLink to="/home/suggest">推荐</RouterLink>
</div>
<RouterView></RouterView>

创建这最新文章和推荐文章的两个组件，我是在pages下又写了一个home文件夹，然后在home文件夹下创建两个组件。

<template>
    <div>
        最新的文章
    </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>

</style>

路由配置，非常简单，我们只需要在home下写个children属性，值为一个数组，然后继续嵌套一个对象就行。

{
path: '/home',
component: Home,
children: [
            {
                path: '/home/newest',
                component: () => import('../pages/home/Newest.vue')
            },
            {
                path: '/home/suggest',
                component: () => import('../pages/home/Suggest.vue')
            }]
}

注意路径不要写错了，然后不出意外的话，你就能看到这样的效果

路由跳转

路由跳转有两种方式，一种就是我们上面写的方式。使用声明式RouterLink标签进行跳转，第二种是使用编程式跳转，接下来我们展示如何使用编程时进行路由跳转。

我们在bot页面添加一个按钮，当我们点击这个按钮时，路由到沸点这个页面中。

我们只需要在bot组件的script中写入如下代码就行。

<script setup>
import { useRouter } from 'vue-router';
const router = useRouter()
const goHot = ()=>{
    router.push('/hot')
}
</script>

我们可以使用如下方式显示传参

router.push({
        path:'/hot',
        query:{
            id:1
        }
    })

编程式跳转和声明式跳转

编程式跳转

编程式导航更适合在需要根据用户操作或特定逻辑条件进行导航的场景中使用，如在表单验证成功后导航到不同的页面，用户点击按钮后，根据逻辑决定导航的目标路径，根据用户的角色或权限进行不同页面的跳转。

声明式跳转

在模板中直接声明导航路径，不需要额外的逻辑处理。如在应用的导航栏或侧边栏中使用 <router-link> 标签创建菜单项

总结

今天我简单聊了vue的路由功能，为什么要有路由到路由的两种安装方式，以及路由的快速入门，简单实现了掘金侧边导航栏的路由功能，两种路由跳转方式。