正文

一步一步学vue

author  author  2022-09-09  120

关键词：

本篇是是vue路由的开篇，会以一个简单的demo对vue-router进行一个介绍，主要覆盖以下几个常用场景：

1、路由跳转

2、嵌套路由

3、路由参数

1、Vue-Router

　　一般来说，路由定义就是定义地址访问规则，然后由路由引擎根据这些定义的规则去查找对应的页面，并转发请求给页面进行处理；对于后端来说就是这么一个模式，但前端不同，前端路由变化也只是页面内的导航比如angular中的模版切换，比如vue和react中的component切换，这种方式都是基于浏览器hash模拟url跳转。

　　vue-router是官方提供的一套路由工具库，基于component的路由配置引入都非常简单，最常用的是两个指令：router-view 和 router-link，router-view用来提供占位，router-link提供路由链接，对于这两个指令的介绍，我们可以直接通过demo介绍。接下来我们以传统方式引入vue-router：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue-demo2</title>
    <script src="https://cdn.bootcss.com/vue/2.4.1/vue.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.js"></script>
    <link href="./css/layui.css" rel="stylesheet">
</head>

<body>
    <div id="app">
       
    </div>
</body>

2、路由跳转

　　对我们的demo做一下简单介绍，demo包含：首页、新闻列表、关于三个模块；其中新闻列表包含最新新闻、历史新闻；每个新闻题目单击时，可查看其详情页。

　　ok，第一步，我们实现基本的路由跳转，单击各个模块，分别打开对应“页面”，可以按照如下几个步骤处理：

　　1、创建模块组件

　　2、创建路由对象，配置路由组件映射关系

　　3、编写路由链接和容器

　　4、启用路由

　　首先，按照上述第一个步骤，我们需要创建三个模块组件：HomeComponent，NewsComponent，AboutComponent：

        var HomeComponent = {
            template: '<div>Home</div>'
        };
        var NewsComponent = {
            template: '<div>News</div>'
        };
        var AboutComponent = {
            template: '<div>About</div>'
        };

　　第二步，配置路由组件映射关系：

 var router = new VueRouter({
　　　　　　  linkActiveClass:'layui-this',//active时会add class layui-this
            routes: [
                { name: 'home', path: '/home', component: HomeComponent },
                { name: 'news', path: '/news', component: NewsComponent },
                { name: 'about', path: '/about', component: AboutComponent }
            ]
        })

　　其中name表示一个具名路由，在创建路由链接的时候可以以path作为路径，也支持直接使用name作为跳转依据，但是path如果改变了，需要多个地方引入的path进行调整。

　　第三步，编写路由链接和容器，这里就是router-link和router-view指令的使用了，配置三个路由分别对应上面代码添加的三个路由（这里引入了layerui作为基础样式）

<div>
            <ul class="layui-nav">
                <router-link :to="{name:'home'}" tag='li' class="layui-nav-item"><a href="">首页</a></router-link>
                <router-link :to="{name:'news'}" tag='li' class="layui-nav-item"><a href="">新闻列表</a></router-link>
                <router-link :to="{name:'about'}" tag='li' class="layui-nav-item"><a href="">联系我们</a></router-link>
            </ul>
            <div class="layer-form">
                <router-view></router-view>
            </div>
        </div>

　　其中to要写成:to，因为参数是对象，而不是一个字符串，tag表示router-link渲染的目标标签，这里表示渲染成li标签。

　　第四步，路由启用，路由模块可以深度集成到Vue实例中，集成方式如下：

 var app = new Vue({
            el: '#app',
            template: `
            <div>
                <ul class="layui-nav">
                    <router-link :to="{name:'home'}" tag='li' class="layui-nav-item " extract><a href="">首页</a></router-link>
                    <router-link :to="{name:'news'}" tag='li' class="layui-nav-item"><a href="">新闻列表</a></router-link>
                    <router-link :to="{name:'about'}" tag='li' class="layui-nav-item"><a href="">联系我们</a></router-link>
                </ul>
                <div class="layer-form">
                    <router-view></router-view>
                </div>
            </div>
            `,
            router: router
        })

此时完整代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue-demo2</title>
    <script src="https://cdn.bootcss.com/vue/2.4.1/vue.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.js"></script>
    <link href="./css/layui.css" rel="stylesheet">
</head>

<body>
    <div id="app">

    </div>

    <script>
        var HomeComponent = {
            template: '<div>Home</div>'
        };
        var NewsComponent = {
            template: '<div>News</div>'
        };
        var AboutComponent = {
            template: '<div>About</div>'
        };

        var router = new VueRouter({
            linkActiveClass:'layui-this',
            routes: [
                { name: 'home', path: '/home', component: HomeComponent },
                { name: 'news', path: '/news', component: NewsComponent },
                { name: 'about', path: '/about', component: AboutComponent }
            ]
        })



       

        var app = new Vue({
            el: '#app',
            template: `
            <div>
                <ul class="layui-nav">
                    <router-link :to="{name:'home'}" tag='li' class="layui-nav-item" extract><a href="">首页</a></router-link>
                    <router-link :to="{name:'news'}" tag='li' class="layui-nav-item"><a href="">新闻列表</a></router-link>
                    <router-link :to="{name:'about'}" tag='li' class="layui-nav-item"><a href="">联系我们</a></router-link>
                </ul>
                <div class="layer-form">
                    <router-view></router-view>
                </div>
            </div>
            `,
            router: router
        })
    </script>
</body>

</html>

View Code

浏览器打开运行，可见如图效果：

　　在运行过程中，我们发现有一点体验不好的地方，在初始化页面时，页面路径为#/时，并没有加载任何组件，因为我们没有配置任何一个路由path为‘／’，针对这种情况，可以增加一条路由规则，当路由为/时，跳转到默认路由;修改路由配置部分代码如下即可：

 routes: [
                {path:'/',redirect:'/home'},
                { name: 'home', path: '/home', component: HomeComponent },
                { name: 'news', path: '/news', component: NewsComponent },
                { name: 'about', path: '/about', component: AboutComponent }
            ]

2、嵌套路由

　　现在模块之间跳转已经OK，但是对于新闻列表，需要包含最新列表和历史列表，这是在新闻列表模块下，但是模式和外层路由一样，还是按照我们的步骤来。

　　第一步，创建路由组件，这里是最新新闻列表和历史新闻列表：

 var LatestNewsComponent = {
            template: '<div>Latest News</div>'
        }
        var HistoryNewsComponent = {
            template: '<div>History News</div>'
      }

　　第二步，配置组件和路由映射关系：

 var router = new VueRouter({
            linkActiveClass: 'layui-this',
            routes: [
                { path: '/', redirect: '/home' },
                { name: 'home', path: '/home', component: HomeComponent },
                {
                    name: 'news', path: '/news', component: NewsComponent,
                    children: [
                        { path: '', redirect: 'latest' },//默认路由
                        { name: 'latest-news', path: 'latest', component: LatestNewsComponent },
                        { name: 'history-news', path: 'hisotry', component: HistoryNewsComponent }
                    ]
                },
                { name: 'about', path: '/about', component: AboutComponent }
            ]
        })

　　第三步，编写路由链接和路由容器，在这里修改NewsComponent：

var NewsComponent = {
            template: `
            <div style="margin-top:5px"> 
                <ul class="layui-nav layui-nav-tree">
                    <router-link :to="{name:'latest-news'}" class="layui-nav-item" tag="li">最新消息</router-link>
                    <router-link :to="{name:'history-news'}" class="layui-nav-item" tag="li">历史消息</router-link>
                </ul>
                <div>
                    <router-view></router-view>
                </div>
            </div>`
        };

　　第四步，启用路由，这个在配置基本路由的时候已经启用，此处忽略此步骤即可，刷新运行（不要在乎页面容颜，看功能，

一步一步学vue

本篇是是vue路由的开篇，会以一个简单的demo对vue-router进行一个介绍，主要覆盖以下几个常用场景：1、路由跳转2、嵌套路由3、路由参数 1、Vue-Router　　一般来说，路由定义就是定义地址访问规则，然后由路由引擎根据这些... 查看详情

一步一步学vue

　　前言：我以后在文章最后再也不说我下篇博文要写什么，之前说的大家也可以忽略，如果你不忽略，会失望的??，不过说出去的话还是要表示一下的，简单介绍一下路由钩子：　　正如其名，vue-router 提供的导航钩子主要... 查看详情

一步一步学vue

本篇完成如下场景：1、系统包含首页、客户信息查询、登录三个模块2、默认进入系统首页，如果要进行用户查询，则需要进行登录授权3、查询用户后点击列表项，则进入详情页面基于上述场景需求描述，在客户端我们考虑，需... 查看详情

一步一步学vue

...不同，我们会对其进行增删改查的基本操作，之后进行进一步的完善，按照常规的系统使用经验，一般我们新增和编辑都是在模态框中处理，这里我们不会去构建复杂的模态框，只用一个简单的div层来代替，后期接下来的文章中... 查看详情

一步一步学rendermonkey

http://blog.csdn.net/tianhai110/article/details/5668832 转载请注明出处：http://blog.csdn.net/tianhai110/ 网上一些关于renderMonkey的教程：《RenderMonkey的基本使用方法》http://www.cnblogs.com/mixiyou/archive/2009/10/05/ 查看详情

一步一步学习vue

本篇继续学习vuex，还是以实例为主；我们以一步一步学Vue（四）中讲述的例子为基础，对其改造，基于vuex重构一遍，这是原始的代码：todolist.js;(function(){varlist=[];varTodo=(function(){varid=1;returnfunction(title,desc){this.title=title;this.desc=desc... 查看详情

一步一步学jvm-垃圾回收算法

标记-清除算法算法分为标记和清除两个阶段：首先标记所有需要回收的对象，在标记完成后统一回收所有被标记的对象。该算法存在的缺点：　　1、 ... 查看详情

一步一步学nlp:熟悉nlp

NLP学习AI工程师必备的核心技能现实生活中的问题---->数学优化问题---->通过合适的工具解决whatisNLPNLP=NLP+NLUNLU:语音／文本->意思(meaning)Natural+langugeUnderstandingNLG:意思->文本／语音Natural+LangugeGenerationwhatis... 查看详情

一步一步学nlp:熟悉nlp

一步一步学多线程-synchronized

　　当线程执行请求synchronized方法或块时，monitor会设置几个虚拟逻辑数据结构来管理这些多线程。　　　　　　请求的线程会首先被加入到线程排队队列中，线程阻塞，当某个拥有线程锁的线程unlock之后，则排队队列里的线程... 查看详情

一步一步学jvm-垃圾回收

　　垃圾回收器在对对象进行回收前，首先要判断对象是否还“活着”。判断方法有以下两种引用计数法给对象中添加一个引用计数器，每当有一个地方引用它时，计数器值就加1。当引用失... 查看详情

一步一步学zookeeper-zookeeper初了解

角色 Zookeeper中的角色主要有以下三类领导者（Leader）查看详情

一步一步学jvm-运行时数据区域

程序计数器（ProgramCounterRegister）像我们平时读书一样，当我们在去做别的事情之前，我们会对我们读到什么地方了做一个标记，方便我们再回来的时候接着重新读。如果这本书有很多人读呢... 查看详情

一步一步学jvm-垃圾回收器

Serial收集器 Serial收集器是最基本、历史最悠久的收集器。这个收集器是一个单线程的收集器。它在进行垃圾收集时，必须暂停其他所有的工作线程，直到它收集结束。Serial收集器是新生代的收... 查看详情

一步一步学java：入门的基础知识

JAVA入门的基础知识学的再多，也要记得复习复习基础知识丫；基本类型及其转换数字中有byte,short,char，int，long，float，double的类型*在使用过程中：要注意在float后面加上F，在long后面加L；longi=10L;floatm=56.345F;char后... 查看详情

一步一步学jvm-java内存模型

主内存与工作内存 Java内存模型的主要目标是定义程序中各个变量的访问规则。即在虚拟机中将变量存储到内存和从内存中取出变量这样的底层细节。这里的变量和Java编程中所说的变量有所区... 查看详情

linux一步一步学linux——dnsdomainname命令(174)(代码片段)

00.目录文章目录00.目录01.命令概述02.命令格式03.常用选项04.参考示例05.附录01.命令概述dnsdomainname命令用于定义DNS系统中FQDN名称中的域名。dnsdomainname=hostname-d02.命令格式用法：dnsdomainname[-v]03.常用选项--help 显示帮助文档--ve... 查看详情

一步一步学ef系列6ioc之autofac

前言之前的前5篇作为EF方面的基础篇，后面我们将使用MVC+EF并且使用IOC,Repository，UnitOfWork，DbContext来整体来学习。因为后面要用到IOC，所以本篇先单独先学习一下IOC，我们本本文单独主要学习Autofac，其实... 查看详情