Vue(3) 路由的简单使用

原创于 2018-12-10 19:44:57 发布 · 427 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#路由

❹、Vue 专栏收录该内容

6 篇文章

订阅专栏

本文详细解释了路由的概念，它是如何在Vue应用中将URL映射到特定组件，以及如何下载和配置Vue路由插件。通过一个实例，展示了如何在项目中引入和使用Vue路由。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是路由？？

路由是负责将进入的浏览器请求映射到特定的组件代码中。即决定了由谁(组件)去响应客户端请求。简单说路由就是url地址和对应的资源的映射，通过一个路径的url地址，可以唯一找到一个资源。路由不包含在vue中，是一个插件，需要单独下载。

下载方式① 官方地址：https://router.vuejs.org/zh/
下载方式② https://unpkg.com/vue-router@3.0.1/dist/vue-router.js

路由入门

在js中定义路由；
挂载到一个dom元素上；
使用路由；
定义路由出口

案例：

第一步：引入js

    <!-- ①引入vue的依赖 -->
    <script type="text/javascript" src="../js/vue.min.js"></script>
    <!-- ②引入路由依赖 -->
    <script type="text/javascript" src="../js/vue_router.js"></script>

第二步：简单使用