VueJS路由 - VueJS教程

VueJS没有内置的路由器功能。需要遵循以下步骤来安装它。

直接从CDN下载

vue-router的最新版本可在 http://unpkg.com/vue-router/dist/vue-router.js

Unpkg.com提供基于npm的cdn链接。上面的链接总是更新到最近的版本。我们可以下载并托管它，并使用脚本标记和vue.js一起使用，如下所示 -

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

使用NPM

运行以下命令来安装vue-router。

npm  install vue-router

使用GitHub

可以从GitHub克隆仓库如下 -

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

下面从一个简单的例子开始，使用vue-router.js。创建一个文件：vue-router.html -

<html>
   <head>
      <meta charset="utf-8" />
      <title>VueJs路由示例</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
      <script type = "text/javascript" src = "http://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>      
   </head>
   <body>
      <div id = "app">
         <h2>路由示例</h2>
         <p>
            <router-link to = "/route1">路由链接-1</router-link>
            <router-link to = "/route2">路由链接-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:20px;background-color:cyan;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 1</div>' }
         const Route2 = { template: '<div style = "border-radius:20px;background-color:green;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 2</div>' }
         const routes = [
            { path: '/route1', component: Route1 },
            { path: '/route2', component: Route2 }
         ];
         const router = new VueRouter({
            routes // short for `routes: routes`
         });
         var vm = new Vue({
            el: '#app',
            router
         });
      </script>
   </body>
</html>

执行上面示例代码，得到以下结果 -

要使用路由，我们需要添加vue-router.js文件。从http://unpkg.com/vue-router/dist/vue-router.js获取代码并将其保存在vue-router.js文件中或者直接引用。

脚本在vue.js之后添加如下 -

<script type = "text/javascript" src = "js/vue.js"></script>
<script type = "text/javascript" src = "js/vue-router.js"></script>

或者 -

<script type = "text/javascript" src = "js/vue.js"></script>
<script type = "text/javascript" src = "http://unpkg.com/vue-router/dist/vue-router.js"></script>

在正文部分，有一个路由器链接定义如下 -

<p>
<router-link to = "/route1">路由链接-1</router-link>
<router-link to = "/route2">路由链接-2</router-link>
</p>

<router-link>是用于导航到HTML内容以显示给用户的组件。to属性是目的地，即将被显示的内容。

在上面这段代码中，我们创建了两个路由器链接。

看看路由器初始化的脚本部分。有两个常量创建如下 -

const  Route1 = { template: '<div style = "border-radius:20px;background-color:cyan;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 1</div>' };
const Route2 = { template: '<div style = "border-radius:20px;background-color:green;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 2</div>' }

当点击路由器链接时需要显示模板。接下来是路由const，它定义了要在URL中显示的路径。

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

路由定义路径和组件。当用户点击路由器链接 时，路径即/route1将显示在URL中。组件将显示模板名称。路由的路径需要与路由器链路匹配到属性。

例如，<router-link to =“here here”> </ router-link>

接下来，使用下面的一段代码将该实例创建到VueRouter。

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

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

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

执行示例并查看浏览器中的显示。在检查和检查路由器链路时，发现它将类添加到活动元素，如下面的截图所示 -

添加的类是class = “router-link-exact-active router-link-active”。活动链接获取类如上面的屏幕截图所示。另外要注意的是，<router-link>被渲染为一个标签。

路由器链接的道具

下面来看看一些传递给<router-link>的其它的属性。

这是给<router-link>的目标路径。点击后，to的值将在内部传递给router.push()。该值需要是一个字符串或一个位置对象。当使用一个对象时，需要将它绑定，如下。

示例-1:  <router-link to = "/route1">Router Link 1</router-link>
renders as
<a href = ”#/route”>Router Link </a>
示例-2:  <router-link v-bind:to = "{path:'/route1'}">Router Link 1</router-link>
示例-3: <router-link v-bind:to =
   "{path:'/route1', query: { name: 'Tery' }}">Router Link 3</router-link>//router link with query string.

以下是示例-3 的链接 -

<p>
<router-link to = "/route1">路由链接-1</router-link>
<router-link to = "/route2">路由链接-2</router-link>
<router-link v-bind:to = "{path:'/route1', query: { name: 'maxsu' }}">Router Link 3</router-link>
</p>

执行上面修改后的代码，得到以下结果 -

在URL路径中，name=maxsu是查询字符串的一部分。例如：http://localhost/vueexamples/vue_router.html#/route1?name=maxsu

replace

添加替换到路由器链接将调用router.replace()而不是router.push()。使用替换，导航历史不存储。例如，

<router-link v-bind:to = "{path:'/route1', query: { name: 'maxsu' }}"   replace>Router Link 1</router-link>

append

添加追加到<router-link><router-link>将使路径相对。
如果想从路由器/route1到路由器的链路路径/route2，它会在浏览器中显示路径为:/route1/route2。如下 -

<router-link v-bind:to = "{ path: '/route1'}" append>Router Link 1</router-link>

tag

目前<router-link>呈现为标签。如果想把它作为一些其他的标签，需要使用tag ="tagname" 来指定相同的标签。

<p>
   <router-link v-bind:to = "{ path: '/route1'}" tag = "span">Router Link 1</router-link>
   <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>

上面已经将标签指定为范围，这就是浏览器中显示的内容。

active-class

缺省情况下，路由器链路处于活动状态时添加的活动类是router-link-active。可以通过设置相同的代码来覆盖这个类。

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

使用的类是active_class ="_active"。下面是浏览器中显示的输出 -

event

目前，router-link的默认事件是click事件。可以使用event属性来改变它。参考以下代码 -

<router-link v-bind:to = "{ path: '/route1'}" event = "mouseover">Router Link 1</router-link>

现在，当将鼠标悬停在路由器链接上时，它将如下面的浏览器中所示进行导航。将鼠标悬停在Router link 1 上时，将看到导航有变化。如下效果 -

上一篇： VueJS指令下一篇： VueJS混合

直接从CDN下载

路由器链接的道具

微信关注