Vue.js 路由

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>

如果要不下载就使用它，可以按以下方式使用它:

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

使用NPM安装路由器

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

 npm install vue-router

Vue.js 路由_https://bianchenghao6.com_【vue教程】_第1张

使用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/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;
 }

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

输出:

Vue.js 路由_https://bianchenghao6.com_【vue教程】_第2张

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

Vue.js 路由_https://bianchenghao6.com_【vue教程】_第3张

示例说明

在上面的示例中，您可以看到我们如下添加了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

在下面的代码中，我们创建了两个路由器链接。我们在主体部分中定义了以下路由器链接:

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

在这里，

是用于导航到HTML内容并将其显示给用户的组件。
至属性指定目的地。例如，您必须单击显示链接的文件。

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

 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，其中我们定义了必须在其中显示的路径网址。

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

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

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

例如，

 <router-link to = "name_of_-the_path"></router-link>

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

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

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

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

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

将属性传递到路由器链接

让我们看看如何传递路由器链接的属性。在上面的示例中，我们已将属性" 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()。该值必须是字符串或位置对象。使用"
至" 属性可以通过三种方式传递值。

示例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/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
          })

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

输出:

Vue.js 路由_https://bianchenghao6.com_【vue教程】_第4张

现在，单击路由器链接3，您将在URL中看到设置名称作为查询字符串。参见输出:

Vue.js 路由_https://bianchenghao6.com_【vue教程】_第5张

replace属性

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

Index.html文件:

 <html>
    <head>
       <title>Vue.js Routing</title>
       <link rel="stylesheet" href="index.css">
         <script src="https://cdn.jsdelivr.net/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文件将是相同的。

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

输出:

Vue.js 路由_https://bianchenghao6.com_【vue教程】_第6张

单击即可看到

append属性

附加标签用于与

添加到使路径相对。让我们举个例子。

示例:

Index.html文件:

 <html>
    <head>
       <title>Vue.js Routing</title>
       <link rel="stylesheet" href="index.css">
         <script src="https://cdn.jsdelivr.net/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;
 }

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

输出:

Vue.js 路由_https://bianchenghao6.com_【vue教程】_第7张

tag属性

呈现为标记。当您要将其呈现为其他标签时，可以使用标签prop。例如，如果要将<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/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文件与前面示例中使用的文件相同。

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

输出:

Vue.js 路由_https://bianchenghao6.com_【vue教程】_第8张

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

Vue.js 路由_https://bianchenghao6.com_【vue教程】_第9张

active-class属性

要将活动类属性激活，它会添加到

。它用于表明路由器链接处于活动状态。它被添加为
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>

这将使"单击路由器链接2"路径处于活动状态，而"单击路由器链接3"将保持相同。

exact-active-class属性

exact-active-class配置当链接完全匹配且处于活动状态时应用的活动CSS类。默认的精确活动类被应用为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/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 路由_https://bianchenghao6.com_【vue教程】_第10张

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

Vue.js 路由_https://bianchenghao6.com_【vue教程】_第11张

Vue.js 计算属性

vue.js 转场动画