Vue学习日记(三)——Vue路由管理vue-router

前言

为了给读者更好的体验,去理解vue-router和下一篇介绍vuex,决定还是来一个实战教程来带大家更加的去深入理解vue-router,在这之前,读者先自行了解和去官网下载npm和node,附:npm官网

项目构建

这里我采用vue-cli+webpack构建初始项目,在vue官网里面也有相关介绍,在这里我就手把手教大家一下吧,先通过控制台进入相关的文件目录下,然后输入

# 后面是注释
# $表示当前文件目录

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖,走你
$ cd my-project
$ npm install
# 运行项目my-preoject
$ npm run dev
  • npm install --global vue-cli 下载构建工具

  • vue init webpack my-project 初始化项目

  • npm install 下载相关资源到node_models

  • npm run dev 运行项目后,在浏览器输入http://localhost:8080/#/可看到

介绍vue-router

经过上面简单的构建之后,一个项目的初始化就完成了,这里vue-cli和webpack已经帮我们弄好了文件目录结构和基本目录

在进行使用vue-router之前,我不得不也先介绍一下vue-router是什么?

它是一个vue.js下的路由组件,那什么是路由呢?网上有一大堆官方的介绍,相信对于小白是难以理解的,这里我就简单的说明一下吧。

其实路由也就是url,url是什么呢?url就是唯一资源定位符,简单的说,也就是标记页面的唯一存在的一个标签,就像https://www.baidu.com,这里的www.baidu.com就是唯一资源定位符,https就只是一种协议,规范计算机网络的通信协议。

介绍完这些,那么对于我们究竟该怎么用呢?

其实很简单,在平时当中,我们就经常碰到在一个网站里面点击链接会弹到另外一个页面,然后就可以发现他们的url改变了,而vue-router就是这样,在同个域名下(这里的域名是http://localhost:8080),改变域名后面的字符参数,比如http://localhost:8080/me和http://localhost:8080/you是两个不同的页面就是靠vue-router进行实现的。

引用vue-router

如果你在之前没有安装vue-router的话,建议可以先去官网,看着文档使用npm安装一下,这里就不多做介绍了。

首先我先在项目my-project/src/components(存放组件的目录)里面添加两个文件me.vue和you.vue

// me.vue
<template>
  <div>
    我是me
  </div>
</template>

<script type="text/ecmascript-6">
export default {}
</script>

<style scoped>
</style>

// you.vue
<template>
  <div>
    我是you
  </div>
</template>

<script type="text/ecmascript-6">
export default {}
</script>

<style scoped>
</style>

然后修改my-project/src/router(存放路由相关信息的目录)下面修改index.js成

import Vue from ‘vue‘
import Router from ‘vue-router‘
import HelloWorld from ‘@/components/HelloWorld‘

// 导入组件
import me from ‘../components/me‘
import you from ‘../components/you‘

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: ‘/‘,
      name: ‘HelloWorld‘,
      component: HelloWorld
    },
    // 将组件命名到路由上,输入http://localhost:8080/#/me
    // 即可进入不同的页面
    {
      path: ‘/me‘,
      component: me
    },
    // 将组件命名到路由上,输入http://localhost:8080/#/you
    // 即可进入不同的页面
    {
      path: ‘/you‘,
      component: you
    }
  ]
})

这样只会输入http://localhost:8080/#/me就会进到其他页面,是不是很简单,
那么我们怎么在页面里面进行跳转呢?

这就运用到了更有趣的知识了就是router-link你只要在你的组件的代码下输入

<router-link :to="/me">这里是跳转链接</router-link>

网页就自动跳转到http://localhost:8080/#/me页面了,但是这样总是不好的,因为,如果由于一些原因,我们想修改路由的名字(比如me改成him)就得改两个文件的信息,因此,vue团队也早就想好了,就是name属性,将my-project/src/router(存放路由相关信息的目录)下面修改index.js成

    // ...
    {
      path: ‘/me‘,
      name: ‘me‘,
      component: me
    },
    // ...

然后跳转就改成

<router-link :to="{ name: ‘me‘}">这里是跳转链接</router-link>

就可以进行跳转了

高级应用

  1. 前端路由 最初级的应用,就和上面的引用一样,当然还可以通过js代码来改变,这个也很简单,就是比如添加一个按钮,点击按钮通过js跳转到其他页面,就是重定向,简单的js代码也下面这样,就可以跳转到其他页面了
vue.$router.push(‘/me‘)
  1. 动态路由 通过router-link传递参数,例如<router-link :to="{ name: ‘user‘, params: { userId }}">User</router-link>,传入userId这个参数,进行渲染不同的路由信息
  2. 嵌套路由 嵌套路由其实简单的理解就是,子路由,例如,我想在me下面在添加几个路由him和she那上面的代码可以这样写之后输入http://localhost:8080/#/me/him就可以进入到子路由的页面
// ...
    {
      path: ‘/me‘,
      name: ‘me‘,
      component: me,
      children: [
        {
            path: ‘him‘
            // ...
        },
        {
            path: ‘she‘
            // ...
        }
      ]
    },
    // ...
  1. 懒加载 结合异步组件以及在组件的created钩子上触发获取数据的ajax请求,可以最大化的降低加载时间,减少流量消耗。这个对于没有项目的人可能接触比较少,建议先知道这个概念。
  2. 重定向 可以实现某些需要根据特定逻辑改变页面原本路由的需求,例如简单的未登录状态下的页面访问“个人信息”路由时应该重定向到登录路由页面。
  3. History的控制 History是Html5的新语法,个人觉得就是对于跳转的时候,特别是微信小程序,就是控制点击回退按钮的时候不至于退出页面而跳转到自己想要的页面

总结

其实还有很多高级应用场景,我就不一一列举出来了,因为这些其实最好还是上官方文档进行说明,我这里只是解释一下简单的用法,以及初学者可能对官方文档会有误解来进行说明一下,希望大家还是学会看API,附官网地址

原文地址:https://www.cnblogs.com/jlfw/p/12037185.html

时间: 2024-11-05 02:38:41

Vue学习日记(三)——Vue路由管理vue-router的相关文章

vue学习笔记——vue-router(路由)

使用路由的时候有两个必要的知识:<router-link></router-link>:这个相当于a标签,点击的切换时候的按钮,<router-view></router-view>:这个就是你加载过来的组件放的位置 使用方法: 1.cnpm install vue-router --save 下载路由 2.在main.js 里面引入路由:import vueRouter from 'vue-router' 3.定义路由:Vue.use(vueRouter)

vue学习(三)完善模板页(bootstrap+AdminLTE)

1.配置index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, init

Vue学习(三):数据绑定语法

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>数据绑定语法</title> </head> <body> <!--1.插值--> <!--文本插值--> <h3 id="example1">{{ message }}<

Vue学习笔记之-起步篇:Vue与React、 Angular的区别

毋庸置疑,Vue.React. Angular这三个是现在比较火的前端框架.这几个框架都各有所长,选择学习哪种就得看个人喜好或者实际项目了.相比之下, Vue 是轻量级且容易学习掌握的. 1.Vue和React 相似之处 都使用 虚拟DOM 提供了响应式(Reactive)和组件化(Composable)的视图组件. 将注意力集中保持在核心库,伴随于此,有配套的路由和负责处理全局状态管理的库. demo: <!DOCTYPE html> <html> <head> &l

Vue学习【第一篇】:Vue初识与指令

什么是Vue 什么是Vue Vue.js是一个渐进式JavaScript框架它是构建用户界面的JavaScript框架(让它自动生成js,css,html等) 渐进式:vue从小到控制页面中的一个变量到页面一块内容到整个页面,最终大到整个项目,东可以用vue框架来实现 vue可以干哪些事 将数据渲染到指定区域(数据可以是后台获取,也可以由前台自己产生) 可以与页面完成基于数据的交互方式 为什么学习Vue 1.整合了Angular React框架的优点(第一手API文档是中文的) 2.单页面应用(

Vue学习日记(四)——Vue状态管理vuex

前言 先说句前话,如果不是接触大型项目,不需要有多个子页面,不使用vuex也是完全可以的. 说实在话,我在阅读vuex文档的时候,也很难以去理解vuex,甚至觉得没有使用它我也可以.但是直到我在项目碰到下面这些问题: 当路由切换的时候,原本路由的数据太多,传递过去太麻烦. 有些数据是多个路由需要用到的,那我就需要从后台获取多次数据 当然,这些问题都可以解决,就是在实例化vue对象的时候,就将这些数据绑定在window对象上面.但是我们也不得不设想: 万一数据太多了,那么可阅读性是不是会下降 如果

Vue学习系列(三)——基本指令

前言 在上一篇中,我们已经对组件有了更加进一步的认识,从组件的创建构造器到组件的组成,进而到组件的使用,.从组件的基本使用.组件属性,以及自定义事件实现父子通讯和巧妙运用插槽slot分发内容,进一步的认识到组件在Vue中的核心地位. 而今天,我们将对vue中的基本指令进行了解汇总,指令在Vue中是个很重要的功能,在Vue项目中是必不可少的.根据官网的介绍,指令 (Directives) 是带有 v- 前缀的特殊属性.指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM.

vue学习笔记(三):vue-cli脚手架搭建

一:安装vue-cli脚手架: 1:为了确保你的node版本在4.*以上,输入 node -v 查看本机node版本,低于4请更新. 2:输入:  npm install -g vue-cli       安装vue-cli脚手架. 3:输入: vue init webpack sell        安装webpack模板,这里的sell是你包的名字,自定义. 4: 5:输入: cd sell    返回包的根目录 npm install    安装依赖 npm run dev   运行

springboot+springcloud+vue学习(三)

thymeleaf模板 :(前端了解不多,主要使用vue,后期再做介绍) springboot 对jsp不是很友好,官方推荐使用thymeleaf模板 Thymeleaf最大的特点是能够直接在浏览器中打开并正确显示模板页面,而不需要启动整个Web应用. 需要特别注意的是Thymeleaf对于URL的处理是通过语法@{-}来处理的.Thymeleaf支持绝对路径URL:<a th:href="@{http://www.thymeleaf.org}">Thymeleaf<