VueJS - 路由组件

VueJS - 路由组件 首页 / VueJs入门教程 / VueJS - 路由组件

VueJS没有内置的路由器函数。无涯教程需要执行一些其他步骤来安装它。

使用CDN

最新版本的vue-router可在https://unpkg.com/vue-router/dist/vue-router.js 中获得

Unpkg.com提供基于npm的CDN链接。上面的链接始终更新为最新版本。可以下载并托管它,并将其与script标签以及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克隆存储库,如下所示:

链接:https://www.learnfk.comhttps://www.learnfk.com/vuejs/vuejs-routing.html

来源:LearnFk无涯教程网

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>

输出

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>
<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 }
];

路径定义路径和组件。用户单击路由器链接时,URL中将显示路径/route1 。

例如, <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
});

执行示例并在浏览器中查看显示。在检查和检查路由器链接时,将发现它向活动元素添加了类,如以下屏幕截图所示。

Route Link

路由链接属性

让无涯教程看到更多要传递给的属性 <router-link>.

to 属性

这是指定给 <router-link> 的目标路径。单击时,to的值将在内部传递到router.push(),该值必须是字符串或位置对象。

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。

Routing Example

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

replace 属性

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

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

append 属性

在<router-link> </router-link> 中添加append将使路径相对。

如果要从路径为/route1的路由器链接转到路径为/route 2的路由器链接,它将在浏览器中显示为/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,这就是浏览器中显示的内容。

Tag

active-class 属性

默认情况下,当路由器链接处于活动状态时添加的活动类为router-link-active。可以通过设置以下代码所示的类来覆盖该类。

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

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

Active Class

exact-active-class 属性

应用的默认精确活动类是router-link-exact-active。

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

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

Exact Active Class

event 属性

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

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

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

Default Event

祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)

技术教程推荐

10x程序员工作法 -〔郑晔〕

分布式系统案例课 -〔杨波〕

OAuth 2.0实战课 -〔王新栋〕

WebAssembly入门课 -〔于航〕

张汉东的Rust实战课 -〔张汉东〕

容量保障核心技术与实战 -〔吴骏龙〕

性能优化高手课 -〔尉刚强〕

Web漏洞挖掘实战 -〔王昊天〕

Web 3.0入局攻略 -〔郭大治〕

好记忆不如烂笔头。留下您的足迹吧 :)