Vue(day4)

这里说的Vue中的路由是指前端路由,与后端路由有所区别。我们可以使用url来获取服务器的资源,而这种url与资源的映射关系就是我们所说的路由。对于单页面程序来说,我们使用url时常常通过hash的方法切换页面,即我们常用的锚点。比如:

<a href="#here">click me</a> /*跳转到对应的锚点*/ <!-- ... --> <div>you find me</div> /*设置锚点*/

而请求路径中的hash不会传到后端,所以常常被用作前端切换页面的方法,即在同一服务器资源下对页面进行切换。

下面分别从Node和Vue中使用路由,来感受具体的区别。

一、使用Node中的路由:express自带ruoter

先看一下需要完成的效果:

Vue(day4)

当我们点击页面上的Home和About按钮是会跳转到对应的服务器资源页面。

首先安装必要的模块,创建文件目录结构和前端资源文件。

# 初始化目录 npm init -y # 安装需要的模块 npm install express art-template express-art-template

其他资源页面可以在参考这里(可直接下载运行)

二、使用Vue中的路由:VueRouter

我们使用官方路由来创建一个简单的单页面应用:

1、VueRouter的简单入门

首先我们需要安装Vue.js和VueRouter.js

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

html代码

<div> <p> <router-link to="/home">Home</router-link> <router-link to="/about">About</router-link> </p> <router-view></router-view> </div>

router-link是VueRouter提供的组件,默认会创建一个a标签,并将to属性的值作为hash值最为该链接的地址。

router-view也是VueRouter提供的组件,用来显示路由对应的模板。

js代码

//1、创建路由视图组件:包含了模板信息 var home = {template: '<h3>This is home page!</h3>'}; var about = {template: '<h3>This is about page!</h3>'}; //2、创建路由规则(路由的映射关系):是一个对象数组,相当于路由映射关系表 var routes = [ {path: '/home', component: home}, {path: '/about', component: about} ]; //3、创建一个路由实例 var router = new VueRouter({ routes: routes }); //4、将路由搭载到Vue实例中 new Vue({ el: '#app', router: router });

2、router-link

<router-link> 组件支持用户在具有路由功能的应用中 (点击) 导航。
通过 to 属性指定目标地址,默认渲染成带有正确链接的 <a> 标签,可以通过配置 tag 属性生成别的标签.。另外,当目标路由成功激活时,链接元素自动设置一个表示激活的 CSS 类名。

to(String|Location, required)

to属性规定了链接跳转的路径,所以是必须的,可以是字符串,也可以是表示路径位置的对象。

<!--将会渲染为:/home--> <router-link to="home">link</router-link> <!--也可以动态绑定--> <router-link :to="'home'"></router-link> <!--动态绑定时便可以传入对象,以下渲染为:/home?useid=123 --> <router-link :to="{path: 'home', query: {useid: '123'}}"></router-link>

replace

默认为false,当设置该属性后路由不会执行router.push(),而是执行router.replace(),这样浏览器的history将不会产生导航记录。

<router-link to="home" replace></router-link>

append

如果设置了该属性,则连接会变成相对链接。比如从/a处点击了连接为/b的来链接,则访问的地址将变为/a/b。

tag

指定导航链接渲染的标签,默认为a标签。渲染为其他标签后任然会监听点击事件,具有导航效果。

active-class

设置链接激活后使用的css类名,默认值为router-link-active,设置后默认值任然存在。默认值可通过路由构造选项linkActiveClass进行配置。

exact

"是否激活" 默认类名的依据是 inclusive match (全包含匹配)。举个例子,如果当前的路径是 /a 开头的,那么 <router-link to="/a"> 也会被设置 CSS 类名。

event(String | Array< String >)

设置激活导航的事件。默认为clcik。

exact-active-calss

配置当链接被精确匹配的时候应该激活的 class。默认值router-link-exact-active,该默认值也是可以通过路由构造函数选项 linkExactActiveClass 进行全局配置的。

3、router-view

<router-view> 组件是一个 functional 组件,渲染路径匹配到的视图组件。<router-view> 渲染的组件还可以内嵌自己的 <router-view>,根据嵌套路径,渲染嵌套组件。

4、路由构建选项

在创建路由是可传入的参数,上面的实例中我们传入了路由规则信息的routes,此外还有其他参数。

routes(Array < routeConfig >)

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpwppg.html