vuejs教程：有内置的路由器功能，如何安装

2018-09-2916:30:40WEB前端开发Comments2,071 views字数 4915阅读模式

VueJS没有内置的路由器功能。需要遵循以下步骤来安装它。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6001.html

直接从CDN下载

vue-router的最新版本可在 http://unpkg.com/vue-router/dist/vue-router.js文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6001.html

Unpkg.com提供基于npm的cdn链接。上面的链接总是更新到最近的版本。我们可以下载并托管它，并使用脚本标记和vue.js一起使用，如下所示 -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6001.html

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

使用NPM文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6001.html

运行以下命令来安装vue-router。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6001.html

npm  install vue-router

使用GitHub文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6001.html

可以从GitHub克隆仓库如下 -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6001.html

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 -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6001.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>

执行上面示例代码，得到以下结果 -
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6001.html

要使用路由，我们需要添加vue-router.js文件。从http://unpkg.com/vue-router/dist/vue-router.js获取代码并将其保存在vue-router.js文件中或者直接引用。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6001.html

脚本在vue.js之后添加如下 -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6001.html

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

或者 -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6001.html

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

在正文部分，有一个路由器链接定义如下 -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6001.html

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

<router-link>是用于导航到HTML内容以显示给用户的组件。to属性是目的地，即将被显示的内容。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6001.html

在上面这段代码中，我们创建了两个路由器链接。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6001.html

看看路由器初始化的脚本部分。有两个常量创建如下 -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6001.html

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中显示的路径。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6001.html

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

路由定义路径和组件。当用户点击路由器链接 时，路径即/route1将显示在URL中。组件将显示模板名称。路由的路径需要与路由器链路匹配到属性。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6001.html

例如，<router-link to =“here here”> </ router-link>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6001.html

接下来，使用下面的一段代码将该实例创建到VueRouter。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6001.html

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

VueRouter构造函数将路由作为参数。路由器对象使用以下代码分配给主vue实例。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6001.html

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

执行示例并查看浏览器中的显示。在检查和检查路由器链路时，发现它将类添加到活动元素，如下面的截图所示 -
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6001.html

添加的类是class = “router-link-exact-active router-link-active”。活动链接获取类如上面的屏幕截图所示。另外要注意的是，<router-link>被渲染为一个标签。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6001.html

路由器链接的道具

下面来看看一些传递给<router-link>的其它的属性。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6001.html

to文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6001.html

这是给<router-link>的目标路径。点击后，to的值将在内部传递给router.push()。该值需要是一个字符串或一个位置对象。当使用一个对象时，需要将它绑定，如下。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6001.html

示例-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 的链接 -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6001.html

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

执行上面修改后的代码，得到以下结果 -
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6001.html

在URL路径中，name=maxsu是查询字符串的一部分。例如：http://localhost/vueexamples/vue_router.html#/route1?name=maxsu文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6001.html

replace文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6001.html

添加替换到路由器链接将调用router.replace()而不是router.push()。使用替换，导航历史不存储。例如，文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6001.html

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

append文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6001.html

添加追加到<router-link><router-link>将使路径相对。
如果想从路由器/route1到路由器的链路路径/route2，它会在浏览器中显示路径为:/route1/route2。如下 -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6001.html

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

tag文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6001.html

目前<router-link>呈现为标签。如果想把它作为一些其他的标签，需要使用tag ="tagname" 来指定相同的标签。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6001.html

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

上面已经将标签指定为范围，这就是浏览器中显示的内容。
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6001.html

active-class文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6001.html

缺省情况下，路由器链路处于活动状态时添加的活动类是router-link-active。可以通过设置相同的代码来覆盖这个类。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6001.html

<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"。下面是浏览器中显示的输出 -
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6001.html

event文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6001.html

目前，router-link的默认事件是click事件。可以使用event属性来改变它。参考以下代码 -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6001.html

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

现在，当将鼠标悬停在路由器链接上时，它将如下面的浏览器中所示进行导航。将鼠标悬停在Router link 1上时，将看到导航有变化。如下效果 -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6001.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6001.html

vuejs教程：有内置的路由器功能，如何安装

直接从CDN下载

路由器链接的道具

编写异步 JavaScript 的 10 个最佳实践

搞懂 Vue3 defineModel 双向绑定：告别繁琐代码！

Tailwind CSS响应式Web设计全面掌握指南

全栈开发使用Node js（Express）、MYSQL进行CRUD

TypeScript项目搭配Axios封装后端接口调用

jQuery 4.0 测试版，体积小性能好不再支持 IE 10

JavaScript实现轮播图方法，代码简单

Next.Js 与 Tailwind 项目开发笔记

使用Vite创建Vue3项目并开发第一个组件

asyncio 中并发运行的多个任务要如何精确控制

Comment