当前位置：慕源网 > VueJS – 路由（14）

VueJS – 路由（14）

作者 : 慕源网 本文共4796个字，预计阅读时间需要12分钟 发布时间： 2021-11-18 共418人阅读

VueJS 没有内置的路由器功能。我们需要执行一些额外的步骤来安装它。

直接从 CDN 下载

最新版本的 vue-router 可在https://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 https://github.com/vuejs/vue-router.git node_modules/vue-router
cd node_modules/vue-router
npm install
npm run build

让我们从一个使用 vue-router.js 的简单示例开始。

例子

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
      <script type = "text/javascript" src = "js/vue-router.js"></script>
   </head>
   <body>
      <div id = "app">
         <h1>Routing Example</h1>
         <p>
            <router-link to = "/route1">Router Link 1</router-link>
            <router-link to = "/route2">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: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 文件。从https://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>

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

<p>
   <router-link   to = "/route1">Router Link 1</router-link>
   <router-link    to = "/route2">Router Link 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>' }

它们有模板，需要在单击路由器链接时显示。

接下来是路由常量，它定义了要在 URL 中显示的路径。

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

路由定义了路径和组件。当用户点击路由器链接时，路径即/route1将显示在 URL 中。

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

例如，<router-link to = ”path 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> 的属性。

到

这是给 <router-link> 的目标路径。单击时，to 的值将在内部传递给 router.push()。该值必须是字符串或位置对象。使用对象时，我们需要绑定它，如示例 2 所示。

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

以下是例如 3 的输出。

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

replace

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

例子

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

append

添加 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>

我们已将标签指定为 span，这就是浏览器中显示的内容。

现在显示的标签是一个跨度标签。当我们点击路由器链接进行导航时，我们仍然会看到点击。

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”。这是浏览器中显示的输出。

exact-active-class

应用的默认exactactive 类是router-link-exact-active。我们可以使用exact-active-class覆盖它。

例子

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

这就是浏览器中显示的内容。

事件

目前router-link默认的事件是click事件。我们可以使用 event 属性更改相同的内容。

例子

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

现在，当我们将鼠标悬停在路由器链接上时，它将按照以下浏览器所示进行导航。将鼠标悬停在路由器链接 1 上，我们将看到导航发生变化。

 


慕源网 » VueJS – 路由（14）

常见问题FAQ

程序仅供学习研究，请勿用于非法用途，不得违反国家法律，否则后果自负，一切法律责任与本站无关。
请仔细阅读以上条款再购买，拍下即代表同意条款并遵守约定，谢谢大家支持理解！
慕源网

慕源网 普通

分享到：

发表评论

相关推荐

开通VIP 享更多特权，建议使用QQ登录
账号登录/注册
QQ登录
微博登录