VueJS - 路由

VueJS路由 - 从基本概念到高级概念，从简单和简单的步骤学习VueJS，其中包括概述，环境设置，简介，实例，模板，组件，计算属性，监视属性，绑定，事件，渲染，过渡和动画，指令，路由，混合，渲染功能，反应接口，示例。

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 src ="/path/to/vue -router.js">

使用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.

示例

         VueJs Instance                                 Routing Example
                     Router Link 1            Router Link 2

const Route1 = { template: 'This is router 1

' } const Route2 = { template: 'This is router 2' } 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 });

输出

Route1 Link

Route2 Link

要开始路由，我们需要添加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 type ="text/javascript"src ="js/vue-router.js">

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

Router Link 1 Router Link 2

< router-link> 是用于导航到要向用户显示的HTML内容的组件. to属性是目标，即将要选择要显示的内容的源文件.

在上面的代码中，我们创建了两个路由器链接.

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

  const Route1 = {template:'< div style ="border-radius:20px; background -color:青色;宽度:200px;高度:50px;边距:10px;字体大小:25px;填充:10px;">这是路由器1'};  const Route2 = {template:'< div style ="border-radius:20px; background-color:green; width:200px; height:50px; margin:10px; font-size:25px; padding:10px ;">这是路由器2'}

他们有模板，需要在点击路由器链接时显示.

接下来是路由const，它定义了在URL中显示的路径.

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

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

Component获取要显示的模板名称.路径的路径需要与路由器链接到属性匹配.

例如，< router-link to ="path here">

接下来，使用以下代码为VueRouter创建实例.

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

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

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

执行示例并在浏览器中查看显示.在检查和检查路由器链接时，我们会发现它将类添加到活动元素，如以下屏幕截图所示.

Route Link

添加的类是 class ="router-link-exact-active router-link-active".活动链接获取类，如上面的屏幕截图所示.另一件需要注意的是，< router-link>作为标记呈现.

路由器链接的道具

让我们看一些要传递给< router-link>的属性.

到

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

e.g. 1:  Router Link 1renders asRouter Link e.g. 2:  Router Link 1e.g. 3: Router Link 1//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 1

追加

添加附加到< router-link>< router-link>会使路径相对.

如果我们想从路由器链接路径/路由1到路由器链路路径/路由2，它将在浏览器中显示路径为/route1/route2 .

示例

Router Link 1

tag

目前< router-link>呈现为标记.如果我们想要将其渲染为其他标记，我们需要使用tag ="tagname"来指定相同的标记;

示例

Router Link 1 Router Link 2

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

Tag

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

active-class

默认情况下，活动类添加时路由器链路处于活动状态是路由器链路活动的.我们可以通过设置相同的方法覆盖该类，如下面的代码所示.

Router Link 1 Router Link 2

使用的类是active_class ="_ active".这是浏览器中显示的输出.

Active Class

确切-active-class

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

示例

Router Link 1 Router Link 2

这是浏览器中显示的内容.

Exact Active Class

event

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

示例

Router Link 1

现在，当我们将鼠标悬停在路由器链接上时，它将导航，如下面的浏览器所示.鼠标悬停在路由器链接1上，我们将看到导航更改.

默认事件