浅谈Vue路由router

标签: 浅谈vue-router路由  vue.js  html  js

Vue路由 router-路由爱之初体验 leve1

各位小伙伴们一定要记住,不管是学习什么,咱们都不能脱离官方问答法,没有什么写的会比官方文档还要详细,遇到不会的,不熟悉的咱也应该第一时间想到官方文档,点击这里移步官方文档!这里是路由部分

一、何为路由?

这个概念很容易理解,就是实现对应视图的切换。

二、如何使用路由呢?

vue官方给我们提供了一个叫做vue-router的库,这也是大家今后学习与工作中最常用的。下面我就用一个例子来给大家介绍一下吧!

1.首先我们要做的事是什么呢?如下图:

在这里插入图片描述
在这里插入图片描述

我们想要完成点击下面的‘搜索’,‘我的’,实现页面内容的切换,在原生中我们也可以用选项卡切换来实现!

2.起步

  • 我们的链接 vue-router中内置的组件
  • 展示内容的区域 与对应的router-link要平级
  • to后面放置的是我们对应的路由,也就是path(这个参数一定要有)
  • tag我们要渲染的标签类型 默认为a链接
  • active-class 可以用来设置**时的样式 也就是我们点击时的样式
  • mode:‘hash’,默认值 可选值为 “hash”|“history”|“abstract”,在选择history时 我们强行刷新页面可能会导致页面挂掉,出现(Cannot GET /search)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <style>
        .active{
            font-weight: 600;
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <router-link tag="li" to="/position" active-class="active">职位</router-link>
        <router-link tag="li" to="/search" active-class="active">搜索</router-link>
        <!-- 这里将会展示我们需要显示的内容 -->
        <router-view></router-view>
    </div>
    <script>
        // 我们来定义两个局部组件
        const position = {
            template:`
                <div>position</div>
            `
        }
        const search = {
            template:`
                <div>search</div>
            `
        }
        /* 这里配置我们的路由 */
        let router = new VueRouter({
            // mode:'hash',默认值  可选值为 "hash"|"history"|"abstract"
            routes:[
                {
                    path:'/position',
                    component:position
                },
                {
                    path:'/search',
                    component:search
                },
            ]
        })

        let vm = new Vue({
            // router:router, key value 一样 我们可以简写成 router如下
            router,
            el:'#app'
        })
    </script>
</body>
</html>

效果如下:现在我们点击 就分别能展示不同内容了 这是
在这里插入图片描述
在这里插入图片描述

3.介绍一下另一个参数 exact

exact用来实现精确匹配 exact 默认值为false

代码其他部分无变动只有这一小部分
        <router-link tag="li" to="/"  exact active-class="active">首页</router-link>
        <router-link tag="li" to="/position" active-class="active">职位</router-link>
        <router-link tag="li" to="/search" active-class="active">搜索</router-link>
没有设置exact时

(我们这里的to后面设置的是/ 没有具体的path 那么不管点击哪一个 我们的‘首页’都会高亮)
在这里插入图片描述以下是设置了精确匹配时:这时候我们的’首页’就不会被加上高亮了 只有在点击他的时候才会有
在这里插入图片描述

以上就是vue-router路由的初体验了,后面我们还会逐步深入,敬请关注!(在下一节将给大家介绍动态路由!)

版权声明:本文为weixin_42390302原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_42390302/article/details/108861859

智能推荐

CentOS 7配置南大docker镜像

文章目录 CentOS 7配置南大docker镜像 0.帮助页面 1.系统要求 2.卸载旧版本(没有旧版本可跳过) 3.安装方式 4.准备工作 5.可选操作 Stable Test Nightly 6.安装docker引擎 7. (可选)修改配置文件防止与xshell连接冲突 8.启动docker CentOS 7配置南大docker镜像 0.帮助页面 南大docker源:https://mirr...

Qcon演讲纪实:详解如何在实时视频通话中实现AR功能

2018年4月20日-22日,由 infoQ 主办的 Qcon 2018全球软件开发大会在北京如期举行。声网首席 iOS 研发工程师,iOS 端移动应用产品设计和技术架构负责人龚宇华,受邀分享了《基于 ARkit 和 ARcore,在实时视频通话中实现 AR 功能》,在演讲中剖析了 AR 与 VR 差异,ARKit 的工作原理,以及逐步讲解如何基于 ARKit 与声网Agora SDK 创建 AR...

POJ2348 UVa10368 HDU1525 Euclid's Game【博弈】

Euclid's GameTime Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submission(s): 4106    Accepted Submission(s): 1947 Probl...

使用Breeze.js编写更好的查询

这篇文章是由同行评审Agbonghama柯林斯 。 感谢所有SitePoint的审稿作出SitePoint内容也可以是最好的! 数据量正在迅速发展,他们正在变得越来越复杂,维护。 许多开发人员希望避免由数据问题他们的工作过程中造成的问题和头痛。 一个使我们的工作更轻松的图书馆是Breeze.js 。 在这篇文章中,我们将讨论我们如何能够写出更好的查询与Breeze.js。 但是首先,我们应该知道什...

Netty框架构建Nio编程

~~~ 随手点赞,养成习惯 ~~~ 为什么选择Netty框架 Netty是业界最流行的NIO框架之一,它的健壮性、功能、性能、可定制性和可扩展性在同类框架中都是首屈一指的。 优点: ① API使用简单,开发门槛低 ②功能强大,预置了多种编解码功能,支持多种主流协议 ③ 定制能力强,可以通过ChannelHandler对通信框架进行灵活地扩展; ④性能高,通过与其他业界主流的NIO框架对比,Nett...

猜你喜欢

【JZOJ5262】【GDOI2018模拟8.12】树(DP,性质题)

Description Solution 首先我们可以知道两个性质:1、路径u-v和路径v-w可以合并为路径u-w;2、路径u1-v1加路径u2-v2和路径u1-v2加路径u2-v1是等价的(就是起始点和终点可以互换) 那么知道这些性质之后就很好做了。我们只用知道每个点多少次做起点和多少次做终点。 我们设f[i]表示满足i子树的需求i上的值要是多少。 那么枚举i的所有儿子,判断a[i]-f[i],...

【String-easy】541. Reverse String II 反转的元素,有反转个数和间隔

1. 题目原址 https://leetcode.com/problems/reverse-string-ii/ 2. 题目描述 3. 题目大意 给定一个字符串,和字符串的间隔k, 这个k表示每k个数反转一次,然后再间隔k个元素再反转k个元素。 4. 解题思路 只要按照间隔去反转就可以了。然后间隔k个元素不反转是通过让i每次递增 2*k完成的。 5. AC代码 6. 相似题型 【1】344. Re...

【C语言笔记结构体】

我们都知道C语言中变量的类型决定了变量存储占用的空间。当我们要使用一个变量保存年龄时可以将其声明为int类型,当我们要使用一个变量保存某一科目的考试成绩时可以将其声明为float。 那么,当我们要做一个学生信息管理系统时,需要保存学生的姓名、学号、年龄等信息,该怎么做呢? 如当要保存三个学生的信息时, 方法一是: 方法二是: 显然,方法二跟更清晰,因为它把name、num、age都集成在一个模板,...

39. Combination Sum 回溯算法简析

LeetCode传送门     这道题要求给你一组正数 C,然后给你一个目标数 T,让你从那组C中找到加在一起等于 T 的那些组合。     例如:给你 [2,3,6,7] 和 7,则返回 [[2,2,3],[7] ] 。      想解决这个问题前,我们首先引入一个新问题,图(树)的遍历问题。  ...

git安装|Linux系统安装 git|Linux如何安装git?Linux通过远程安装git|

Git是一个开源的分布式版本控制系统,可以有效、高速地处理项目版本管理。Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。 开发者需要一个GIT账号,通过这个查看项目的提交记录,可以更加清楚项目的开发情况,便于版本控制。 以下介绍在CentOS8操作系统搭建GIT服务器。   一、安装GIT服务器流程   安装GIT...