k线精解与实战进阶pdf: Vue(day4)

北京赛车pk10软件计划手机版下载 www.3gt5.cn 这里说的Vue中的路由是指前端路由,与后端路由有所区别。我们可以使用url来获取服务器的资源,而这种url与资源的映射关系就是我们所说的路由。对于单页面程序来说,我们使用url时常常通过hash的方法切换页面,即我们常用的锚点。比如:

<a href="#here">click me</a> /*跳转到对应的锚点*/

<!-- ... -->

<div id="here">you find me</div> /*设置锚点*/

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

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

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

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

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

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

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

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

二、使用Vue中的路由:VueRouter

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

1、VueRouter的简单入门

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

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  • html代码

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

    router-linkVueRouter提供的组件,默认会创建一个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
    });

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

    routes是包含路由映射关系的数组,数组的每一项都包含了一条路由映射信息。routeConfig可以包含一些信息:

    declare type routeConfig = {
        path: string, //路径
        component: componentObj,//视图组件
        name: string,//命名路由
        components: {[name: string]: componentObj},//命名视图组件
        redirect: string | Location | Function,
        props: boolean | Object | Function,
        alias: string | Array<string>,
      children: Array<RouteConfig>, // 嵌套路由
      beforeEnter: (to: Route, from: Route, next: Function) => void,
      meta: any,
    
          // 2.6.0+
      caseSensitive: boolean,// 匹配规则是否大小写敏感?(默认值:false)
      pathToRegexpOptions: Object// 编译正则的选项
    }
  • mode

    最开始说到的前端路由和后端路由的差别,我们可以使用mode来配置路由的模式,有以下三种模式:

    • hash:浏览器模式,会在链接前加上"#"最为俩链接,支持所有浏览器。
    • history:依赖 HTML5 History API 和服务器配置。
    • abstract:支持所有 JavaScript 运行环境,如 Node.js 服务器端。
  • base

    设置路由的基路径,默认为"/"。

  • linkActiveClass

  • linkExactActiveClass

此外还有一些其他可供选择的项,这里不再一一赘述。更多细节请参考:Vue-router官方文档

5、路由实例属性

  • router.app:配置了该路由的Vue根实例。
  • router.mode:路由的模式。
  • router.currentRute:当前路由对应的路由信息对象。

6、 路由对象

一个路由对象 (route object) 表示当前激活的路由的状态信息,包含了当前 URL 解析得到的信息,还有 URL 匹配到的路由记录 (route records)。

路由对象是不可变 (immutable) 的,每次成功的导航后都会产生一个新的对象。

路由对象可以出现在多个地方,自如组件内:this.$route。(注意是$route而不是$router,前者是路由对象,后者是路由实例)。

路由对象有以下属性:

  • $route.path:当前导航路径。
  • $route.params:一个 key/value 对象,包含了动态片段和全匹配片段,如果没有路由参数,就是一个空对象。
  • $route.query:一个 key/value 对象,表示 URL 查询参数。
  • $route.hash:当前路由的 hash 值 (带 #) ,如果没有 hash 值,则为空字符串。
  • $route.fullPath:完成解析后的 URL,包含查询参数和 hash 的完整路径。
  • $route.matched:一个数组,包含当前路由的所有嵌套路径片段的路由记录 。路由记录就是 routes 配置数组中的对象副本 (还有在 children 数组)。
  • $route.name:当前路由的名称,如果有的话。
  • $route.redirectedFrom:如果存在重定向,即为重定向来源的路由的名字。

更多细节请参考:Vue-router官方文档

7、一些简单的例子

#路由对象的使用
<p>
    <!--注意:这里如果没有 / 就会变成append模式 ,即在当前连接下添加连接-->
    <router-link to="/query?id='123'&name='jinx'">Query</router-link>
    <router-link to="/params/456/yasuo">Params</router-link>
</p>
<router-view></router-view>
//1、创建路由视图组件:在模版中掉用路由对象
var query = {template: '<h3>this is query: id=<em>{{$route.query.id}}</em>&name=<em>{{$route.query.name}}</em></h3>'};
var params = {template: '<h3>This is params: id=<em>{{$route.params.id}}</em>, name=<em>{{$route.params.name}}</em></h3>'};

//2、创建路由规则
var routes = [
    {path: '/query', component: query},
    {path: '/params/:id/:name', component: params}
];

//3、创建一个路由实例
var router  = new VueRouter({
    routes: routes
});
//4、将路由搭载到Vue实例中
new Vue({
    el: '#app',
    router: router
});
#路由嵌套
<div id="app">
<!--路由-->
<router-link to="/">Home</router-link>
<router-link to="/account">Account</router-link>
<router-view></router-view>
<!--模板-->
<script type="text/template" id="account-template">
    <div>
        <h3>用户操作界面</h3>
        <!--子路由-->
        <router-link to="/account/login">login</router-link>
        <router-link to="/account/register">register</router-link>
        <router-view></router-view>
    </div>
</script>
</div>
//1、创建路由视图组件
var home = {template: '<h3>home page</h3>'};
var account = {template: '#account-template'};//可以导入模板(这里使用template标签的使用有bug不知道什么原因)
var login = {template: '<h3>登陆</h3>'};
var register = {template: '<h3>注册</h3>'};
//2、创建路由规则
var routes = [
    {path: '/', component: home},
    {path: '/account',
    component: account, 
    children: [
        {path: '/account/login', component: login},
        {path: '/account/register', component: register}
    ]
    },
];

//3、创建一个路由实例
var router  = new VueRouter({
    routes: routes
});
//4、将路由搭载到Vue实例中
new Vue({
    el: '#app',
    router: router
});

可以尝试一下如果子路由也写在外部routes的效果(当写在外部就会共用router-view标签)。关于模板需要注意的是,可以使用类似script这样的标签来包裹模板,然后根据id进行引用即可,另外,模板只能有一个根元素。关于模板标签的使用可以参考这篇文章:HTML5 template 标签元素简介

#命名视图组件

目前我们都只是用了一个router-view标签,如果我们需要使用多个,那我们就需要对组件进行命名,否则无法找到要渲染的位置。注意,使用的是conponents而非component。

比如下面的例子:

<div id="app">
<!--对路由视图进行命名-->
<router-view></router-view>
<div style="display: flex;height: 800px;">
    <router-view name="left"></router-view>
    <router-view name="main"></router-view>
</div>
</div>
//1、创建路由视图组件
var header = {template: '<div class="header">header</div>'};
var left = {template: '<div class="left">left</div>'};
var main = {template: '<div class="main">main</div>'};
//2、创建路由规则
var routes = [
    {path: '/',
    components: {
        default: header,
        left: left,
        main: main
    }//命名视图组件
}];

//3、创建一个路由实例
var router  = new VueRouter({
    routes: routes
});
//4、将路由搭载到Vue实例中
new Vue({
    el: '#app',
    router: router
});

再添加一下样式:

body{
    margin: 0px;
    padding: 0px;
}
.header{
    background-color: #6aa4d2;
    height: 100px;
}
.left{
    background-color: #999ddd;
    flex: 2;
}
.main{
    background-color: #b6b985;
    flex: 8;
}

就可以看到以下布局效果:

posted @ 2019-03-22 11:04 风之之 阅读(...) 评论(...) 编辑 收藏
  • 打持久战不好,打速决战——将中美贸易快速引导到清零——美国就受不了了——然后由我主导休战谈判。效果是“两败俱不伤”,用我的体制力平息真正的贸易战,夺回主动权! 2019-05-26
  • “价值由劳动创造≠劳动必然创造价值”错;“价值由劳动创造=劳动必然创造价值”对。 2019-05-24
  • 清凉端午过后 气温重回30℃ 2019-05-24
  • 周国平:男女之爱已经很强烈了,但亲子之爱更强烈 2019-05-22
  • 君弘精益精牌讲师投资课 2019-05-22
  • 弹幕评论别降低了审美品位 2019-05-20
  • 人民网评:掌握核心技术,才不会被卡脖子 2019-05-05
  • 燕山谭客.blog的博客—强国博客—人民网 2019-05-04
  • 陕西国防工业职业技术学院百名大学生志愿者敬老院慰问孤寡老人陕西国防工业职业技术学院百名大学生志愿者敬老院慰问-陕西教育新闻 2019-05-04
  • 天津市环境保护突出问题边督边改公开信息 2019-04-29
  • 自作多情。先将台湾收回来再说也不迟啊。 2019-04-25
  • 【世界杯·望俄打卦】突尼斯VS英格兰 2019-04-25
  • 紫光阁中共中央国家机关工作委员会 2019-04-19
  • 学习贯彻落实十九大精神 2019-04-16
  • 全国啦啦操联赛临汾站开幕 2019-03-31
  • 302| 186| 14| 187| 898| 521| 628| 901| 89| 202|