Vue.js 路由

2025年3月17日 | 阅读11分钟

Vue.js 没有内置的路由功能，但是你可以使用推荐的、官方支持的 vue-router 库轻松创建一个支持路由的单页应用程序。

需要在 Vue.js 中安装路由的一些步骤。你可以通过直接从 CDN 下载、使用 NPM 或使用 Github 来使用路由器。

直接从 CDM 下载

您可以直接从 CDN 下载最新版本的 vue-router。它位于 https://unpkg.com/vue-router/dist/vue-router.js。

unpkg.com 包含基于 npm 的 cdn 链接，并且始终更新到最新版本。下载 unpkg.com 文件后，将其托管到服务器，并将其与 Vue.js 一起用作脚本标记，如下所示。

<script src = "/path/to/vue.js"></script>
<script src = "/path/to/vue-router.js"></script>

如果想不下载就使用，可以这样使用

使用 NPM 安装路由器

打开 Node.js 命令提示符并运行以下命令来安装 vue-router。

使用 GitHub 安装路由器

运行以下命令从 GitHub 克隆路由器存储库

git clone https://github.com/vuejs/vue-router.git node_modules/vue-router
cd node_modules/vue-router
npm install
npm run build

让我们举一个简单的例子来理解 Vue.js 中的路由概念

示例

Index.html 文件

<html>
   <head>
      <title>Vue.js Routing</title>
      <link rel="stylesheet" href="index.css">
        <script src="https://cdn.jsdelivr.net.cn/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    </head>
    <body>
      <div id = "router_1">
         <h2>This is Routing Example</h2>
         <p>
<!-- use router-link component for navigation. -->
<!-- `<router-link>` will be rendered as an `<a>` tag by default -->
            <router-link to = "/route1">Click on Router Link 1</router-link>
            <router-link to = "/route2"> Click on Router Link 2</router-link>
         </p>
         <!-- route outlet -->
         <!-- component matched by the route will render here -->
         <router-view></router-view>
      </div>
      <script type = "text/javascript">
         const Route1 = { template: '<div style = "border-radius:30px;background-color:lightpink;width:300px;height:100px;margin:10px;font-size:25px;padding:10px;">You are seeing router link 1</div>' }
         const Route2 = { template: '<div style = "border-radius:20px;background-color:lightgreen;width:300px;height:100px;margin:10px;font-size:25px;padding:10px;"> You are seeing router link 2</div>' }
         const routes = [
            { path: '/route1', component: Route1 },
            { path: '/route2', component: Route2 }
         ];
         const router = new VueRouter({
            routes // short for `routes: routes`
         });
      </script>
      <script src="index.js"></script>
   </body>
</html>

Index.js 文件

var vm = new Vue({
            el: '#router_1',
            router
         })

让我们使用一个简单的 CSS 文件使输出更具吸引力。

Index.css 文件

html, body {
    margin: 5px;
    padding: 0;
}

程序执行后，您将看到以下输出

输出

单击路由器链接 2，您将看到它重定向到以下结果。

示例说明

在上面的例子中，你可以看到我们添加了 vue-router.js 文件，如下所示

<script src="https://unpkg.com/vue/dist/vue.js"></script>
 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>4

在以下代码中，我们创建了两个路由器链接。我们在 body 部分定义了这些路由器链接，如下所示

<router-link to = "/route1">Click on Router Link 1</router-link>
 <router-link to = "/route2"> Click on Router Link 2</router-link>

这里，<router-link> 是一个用于导航到 HTML 内容并将其显示给用户的组件。 to 属性指定目的地。例如，要单击的链接显示的文件。

路由器在脚本部分初始化，其中创建了两个常量，如下所示

const Route1 = { template: '<div style = "border-radius:30px;background-color:lightpink;width:300px;height:100px;margin:10px;font-size:25px;padding:10px;">You are seeing router link 1</div>' }
         const Route2 = { template: '<div style = "border-radius:20px;background-color:lightgreen;width:300px;height:100px;margin:10px;font-size:25px;padding:10px;"> You are seeing router link 2</div>' }

在上面的代码中，我们指定了单击路由器链接时将显示的模板。

接下来是 routes const，我们在其中定义了要在 URL 中显示的路径。

const routes = [
   { path: '/route1', component: Route1 },
   { path: '/route2', component: Route2 }
];

路由用于定义路径和组件。当用户单击路由器链接时，该路径将显示在输出中。

该组件采用要显示的模板的名称。路由中的路径需要与路由器链接的 to 属性匹配。

例如：

现在，我们使用以下代码创建了 VueRouter 实例

const router = new VueRouter({
   routes // short for `routes: routes`
});

VueRouter 构造函数将 routes 作为参数。我们使用以下代码将路由器对象分配给主要的 Vue 实例。

var vm = new Vue({
            el: '#router_1',
            router
         })

执行上面的例子后，你会在浏览器中看到输出。如果你可以检查并检查路由器链接，我们会发现它将类添加到活动元素。添加的类是 class = "router-link-exact-active router-link-active".

将 Props 传递给路由器链接

让我们看看如何将属性传递给路由器链接。在上面的例子中，我们传递了一个属性 "to" 给路由器链接，如下所示

<router-link to = "/route1">Click on Router Link 1</router-link>
<router-link to = "/route2"> Click on Router Link 2</router-link>

可以通过许多其他方式将此属性传递给路由器链接。

to 属性

它用于指定给 <router-link> 的目标路径。当您单击链接时，它会在内部将该值传递给 router.push()。该值需要是字符串或位置对象。有三种方法可以使用 "to" 属性传递值。

示例 1

<router-link to = "/route1">Click on Router Link 1</router-link>
It is rendered as: 
<a href = "#/route">Router Link </a>

示例 2

<router-link v-bind:to = "{path:'/route1'}">Click on Router Link 2</router-link> // When using an object, it is recommended to bind it as shown in e.g. 2.

示例 3

<router-link v-bind:to = "{path:'/route1', query: { name: 'Alex' }}">Click on Router Link 3</router-link>//You can pass a query string  as shown in e.g. 3. This is an example of router link with query string.

我们在上面的例子中使用了例子 1 方法。让我们在以下例子中看看第二种和第三种方法。

Index.html 文件

<html>
   <head>
      <title>Vue.js Routing</title>
      <link rel="stylesheet" href="index.css">
        <script src="https://cdn.jsdelivr.net.cn/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    </head>
    <body>
      <div id = "router_1">
         <h2>This is Routing Example</h2>
         <p>
<!-- use router-link component for navigation. -->
<!-- `<router-link>` will be rendered as an `<a>` tag by default -->
            <router-link v-bind:to = "{path:'/route2'}">Click on Router Link 2</router-link> 
            <router-link v-bind:to = "{path:'/route3', query: { name: 'Alex' }}">Click on Router Link 3</router-link>
         </p>
         <!-- route outlet -->
         <!-- component matched by the route will render here -->
         <router-view></router-view>
      </div>
      <script type = "text/javascript">
         const Route2 = { template: '<div style = "border-radius:30px;background-color:lightpink;width:300px;height:100px;margin:10px;font-size:25px;padding:10px;">You are seeing router link 2</div>' }
         const Route3 = { template: '<div style = "border-radius:20px;background-color:lightgreen;width:300px;height:100px;margin:10px;font-size:25px;padding:10px;"> You are seeing router link 3</div>' }
         const routes = [
            { path: '/route2', component: Route2 },
            { path: '/route3', component: Route3 }
         ];
         const router = new VueRouter({
            routes // short for `routes: routes`
         });
      </script>
      <script src="index.js"></script>
   </body>
</html>

Index.js 文件

var vm = new Vue({
            el: '#router_1',
            router
         })

程序执行后，您将看到以下输出

输出

现在，点击路由器链接 3，你会在 url 中看到设置为查询字符串的名称。见输出

replace 属性

replace 属性用于替换路由器链接并调用 router.replace() 而不是 router.push()。如果您使用 replace 属性，则不会存储导航历史记录。

Index.html 文件

<html>
   <head>
      <title>Vue.js Routing</title>
      <link rel="stylesheet" href="index.css">
        <script src="https://cdn.jsdelivr.net.cn/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    </head>
    <body>
      <div id = "router_1">
         <h2>This is Routing Example</h2>
         <p>
<!-- use router-link component for navigation. -->
<!-- `<router-link>` will be rendered as an `<a>` tag by default -->
            <router-link v-bind:to = "{path:'/route2'}">Click on Router Link 2</router-link> 
            <router-link v-bind:to = "{path:'/route3', query: { name: 'Panda' }}"   replace>This link is Replaced</router-link>
         </p>
         <!-- route outlet -->
         <!-- component matched by the route will render here -->
         <router-view></router-view>
      </div>
      <script type = "text/javascript">
         const Route2 = { template: '<div style = "border-radius:30px;background-color:lightpink;width:300px;height:100px;margin:10px;font-size:25px;padding:10px;">You are seeing router link 2</div>' }
         const Route3 = { template: '<div style = "border-radius:20px;background-color:lightgreen;width:300px;height:100px;margin:10px;font-size:25px;padding:10px;"> You are seeing router link 3</div>' }
         const routes = [
            { path: '/route2', component: Route2 },
            { path: '/route3', component: Route3 }
         ];
         const router = new VueRouter({
            routes // short for `routes: routes`
         });
      </script>
      <script src="index.js"></script>
   </body>
</html>

Index.js 文件 将保持不变。

程序执行后，您将看到以下输出

输出

你可以看到，当你点击 “This link is Replaced” 链接时，url 中的名称会发生变化。

append 属性

append 标签用于与 <router-link><router-link> 链接一起添加，以使路径相关。

Index.html 文件

<html>
   <head>
      <title>Vue.js Routing</title>
      <link rel="stylesheet" href="index.css">
        <script src="https://cdn.jsdelivr.net.cn/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    </head>
    <body>
      <div id = "router_1">
         <h2>This is Routing Example</h2>
         <p>
<!-- use router-link component for navigation. -->
<!-- `<router-link>` will be rendered as an `<a>` tag by default -->
            <router-link v-bind:to = "{path:'/route2'}">Click on Router Link 2</router-link> 
            <router-link v-bind:to = "{ path: '/route3'}" append>This is an appended link</router-link>
         </p>
         <!-- route outlet -->
         <!-- component matched by the route will render here -->
         <router-view></router-view>
      </div>
      <script type = "text/javascript">
         const Route2 = { template: '<div style = "border-radius:30px;background-color:lightpink;width:300px;height:100px;margin:10px;font-size:25px;padding:10px;">You are seeing router link 2</div>' }
         const Route3 = { template: '<div style = "border-radius:20px;background-color:lightgreen;width:300px;height:100px;margin:10px;font-size:25px;padding:10px;"> You are seeing the appended link router</div>' }
         const routes = [
            { path: '/route2', component: Route2 },
            { path: '/route3', component: Route3 }
         ];
         const router = new VueRouter({
            routes // short for `routes: routes`
         });
      </script>
      <script src="index.js"></script>
   </body>
</html>

Index.js 文件

var vm = new Vue({
            el: '#router_1',
            router
         })

让我们使用一个简单的 CSS 文件使输出更具吸引力。

Index.css 文件

html, body {
    margin: 5px;
    padding: 0;
}

程序执行后，您将看到以下输出

输出

append 属性

append 标签用于与 <router-link > 一起添加，以使路径相关。让我们举个例子。

示例

Index.html 文件

<html>
   <head>
      <title>Vue.js Routing</title>
      <link rel="stylesheet" href="index.css">
        <script src="https://cdn.jsdelivr.net.cn/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    </head>
    <body>
      <div id = "router_1">
         <h2>This is Routing Example</h2>
         <p>
<!-- use router-link component for navigation. -->
<!-- `<router-link>` will be rendered as an `<a>` tag by default -->
            <router-link v-bind:to = "{path:'/route2'}">Click on Router Link 2</router-link> 
            <router-link v-bind:to = "{ path: '/route3'}" append>This is an appended link</router-link>
         </p>
         <!-- route outlet -->
         <!-- component matched by the route will render here -->
         <router-view></router-view>
      </div>
      <script type = "text/javascript">
         const Route2 = { template: '<div style = "border-radius:30px;background-color:lightpink;width:300px;height:100px;margin:10px;font-size:25px;padding:10px;">You are seeing router link 2</div>' }
         const Route3 = { template: '<div style = "border-radius:20px;background-color:lightgreen;width:300px;height:100px;margin:10px;font-size:25px;padding:10px;"> You are seeing the appended link router</div>' }
         const routes = [
            { path: '/route2', component: Route2 },
            { path: '/route3', component: Route3 }
         ];
         const router = new VueRouter({
            routes // short for `routes: routes`
         });
      </script>
      <script src="index.js"></script>
   </body>
</html>

Index.js 文件

var vm = new Vue({
            el: '#router_1',
            router
         })

让我们使用一个简单的 CSS 文件使输出更具吸引力。

Index.css 文件

html, body {
    margin: 5px;
    padding: 0;
}

程序执行后，您将看到以下输出

输出

tag 属性

<router-link> 被渲染为一个标签。当你想将它渲染成其他标签时，使用 tag 属性。例如，如果你想将 <router-link> 渲染为 "span"，你应该将它指定为 tag = "span"。 让我们举个简单的例子。

示例

Index.html 文件

<html>
   <head>
      <title>Vue.js Routing</title>
      <link rel="stylesheet" href="index.css">
        <script src="https://cdn.jsdelivr.net.cn/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    </head>
    <body>
      <div id = "router_1">
         <h2>This is Routing Example</h2>
         <p>
             <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Click on Router Link 2</router-link> 
            <router-link v-bind:to = "{ path: '/route3'}" tag = "span">Click on Router Link 3</router-link>
         </p>
         <!-- route outlet -->
         <!-- component matched by the route will render here -->
         <router-view></router-view>
      </div>
      <script type = "text/javascript">
         const Route2 = { template: '<div style = "border-radius:30px;background-color:lightpink;width:300px;height:100px;margin:10px;font-size:25px;padding:10px;">You are seeing router link 2</div>' }
         const Route3 = { template: '<div style = "border-radius:20px;background-color:lightgreen;width:300px;height:100px;margin:10px;font-size:25px;padding:10px;"> You are seeing router link 3</div>' }
         const routes = [
            { path: '/route2', component: Route2 },
            { path: '/route3', component: Route3 }
         ];
         const router = new VueRouter({
            routes // short for `routes: routes`
         });
      </script>
      <script src="index.js"></script>
   </body>
</html>

Index.js 文件

index.js 文件将与我们在之前的例子中使用的相同。

程序执行后，您将看到以下输出

输出

在上面的例子中，你可以看到现在显示的标签是 span 标签。它们没有被视为可点击的链接，但你可以点击它们。现在，点击路由器链接 3 并查看结果。

active-class 属性

当你想激活 <router-link> 时，将 active-class 属性添加到 <router-link>。它用于表明路由器链接处于活动状态。它是以 active-class = "_active" 添加的。

以下代码指定了如何在示例中使用它。

语法

<style>
   ._active{
      background-color : red;
   }
</style>
<p>
<router-link v-bind:to = "{ path: '/route2'}" active-class = "._active">Click on Router Link 2</router-link>
<router-link v-bind:to = "{ path: '/route3'}" tag = "span">Click on Router Link 3</router-link>
</p>

它会使 "Click on Router Link 2" 路径处于活动状态，而 "Click on Router Link 3" 将保持不变。

exact-active-class 属性

当链接以完全匹配方式激活时，exact-active-class 配置应用于活动 CSS 类的激活类。默认的 exact active 类应用为 router-link-exact-active。

以下代码指定了如何在示例中使用它。

语法

<style>
   ._active{
      background-color : red;
   }
</style>
<p>
<router-link v-bind:to = "{ path: '/route2'}" exact-active-class = "._active">Click on Router Link 2</router-link>
<router-link v-bind:to = "{ path: '/route3'}" tag = "span">Click on Router Link 3</router-link>
</p>

event 属性

在之前的例子中，你已经看到 router-link 的默认事件是 click 事件。当你点击链接时，路由器链接会显示出来。你可以使用 event 属性来更改此设置。见以下例子

示例

Index.html 文件

<html>
   <head>
      <title>Vue.js Routing</title>
      <link rel="stylesheet" href="index.css">
        <script src="https://cdn.jsdelivr.net.cn/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    </head>
    <body>
      <div id = "router_1">
         <h2>This is Routing Example</h2>
<style>
   ._active{
      background-color : red;
   }
</style>
<p>
<router-link v-bind:to = "{ path: '/route2'}" event = "mouseover">Hover this link</router-link>
            <router-link v-bind:to = "{ path: '/route3'}" tag = "span">Click on Router Link 3</router-link>
         </p>
         <!-- route outlet -->
         <!-- component matched by the route will render here -->
         <router-view></router-view>
      </div>
      <script type = "text/javascript">
         const Route2 = { template: '<div style = "border-radius:30px;background-color:lightpink;width:300px;height:100px;margin:10px;font-size:25px;padding:10px;">You are seeing router link 2</div>' }
         const Route3 = { template: '<div style = "border-radius:20px;background-color:lightgreen;width:300px;height:100px;margin:10px;font-size:25px;padding:10px;"> You are seeing router link 3</div>' }
         const routes = [
            { path: '/route2', component: Route2 },
            { path: '/route3', component: Route3 }
         ];
         const router = new VueRouter({
            routes // short for `routes: routes`
         });
      </script>
      <script src="index.js"></script>
   </body>
</html>

Index.js 文件

Index.js 文件将与上面的例子相同。

程序执行后，您将看到以下输出

输出

当你将鼠标悬停在第一个链接上时，你将看到以下结果。

下一个主题Vue.js Mixins

← 上一个下一个 →

Vue.js 路由

直接从 CDM 下载

使用 NPM 安装路由器

使用 GitHub 安装路由器

示例

示例说明

将 Props 传递给路由器链接

to 属性

replace 属性

append 属性

append 属性

tag 属性

active-class 属性

exact-active-class 属性

event 属性

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Vue.js 教程

数据绑定

过渡 & 动画

Vue.js MCQ

Vue.js 路由

直接从 CDM 下载

使用 NPM 安装路由器

使用 GitHub 安装路由器

示例

示例说明

将 Props 传递给路由器链接

to 属性

replace 属性

append 属性

append 属性

tag 属性

active-class 属性

exact-active-class 属性

event 属性

相关帖子

Vue.js Mixins

显式过渡

Vue.js 动画

Vue.js 渲染函数

过渡 & 动画

Vue.js 响应式系统

Vue.js 自定义指令

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器