一篇文章带你了解vue路由

2024-08-03 05:07:41

概念

路由的本质就是一种对应关系，比如说我们在url地址中输入我们要访问的url地址之后，浏览器要去请求这个url地址对应的资源。
那么url地址和真实的资源之间就有一种对应的关系，就是路由。

路由分为前端路由和后端路由

1).后端路由是由服务器端进行实现，并完成资源的分发
后端路由性能相对前端路由来说较低，所以，我们接下来主要学习的是前端路由
2).前端路由是依靠hash值(锚链接)的变化进行实现
前端路由的基本概念：根据不同的事件来显示不同的页面内容，即事件与事件处理函数之间的对应关系
前端路由主要做的事情就是监听事件并分发执行事件处理函数

Vue Router

简介

它是一个Vue.js官方提供的路由管理器。是一个功能更加强大的前端路由器，推荐使用。
Vue Router和Vue.js非常契合，可以一起方便的实现SPA(single page web application,单页应用程序)应用程序的开发。

Vue Router依赖于Vue，所以需要先引入Vue，再引入Vue Router

Vue Router的特性

支持H5历史模式或者hash模式
支持嵌套路由
支持路由参数
支持编程式路由
支持命名路由
支持路由导航守卫
支持路由过渡动画特效
支持路由懒加载
支持路由滚动行为

Vue Router的使用步骤

1.导入js文件

<script src="lib/vue_2.5.22.js"></script>
<script src="lib/vue-router_3.0.2.js"></script>

2.添加路由链接:是路由中提供的标签，默认会被渲染为a标签，to属性默认被渲染为href属性，to属性的值会被渲染为#开头的hash地址

<router-link to="/user">User</router-link>

3.添加路由填充位（路由占位符）

<router-view></router-view>

4.定义路由组件

var User = { template:"<div>This is User</div>" }

5.配置路由规则并创建路由实例

var myRouter = new VueRouter({
    //routes是路由规则数组
    routes:[
        //每一个路由规则都是一个对象，对象中至少包含path和component两个属性
        //path表示  路由匹配的hash地址，component表示路由规则对应要展示的组件对象
        {path:"/user",component:User},
        {path:"/login",component:Login}
    ]
})

6.将路由挂载到Vue实例中

new Vue({    el:"#app",    //通过router属性挂载路由对象    router:myRouter})new Vue({
    el:"#app",
    //通过router属性挂载路由对象
    router:myRouter
})

补充：

路由重定向：可以通过路由重定向为页面设置默认展示的组件

在路由规则中添加一条路由规则即可，如

var myRouter = new VueRouter({
    //routes是路由规则数组
    routes: [
        //path设置为/表示页面最初始的地址 / ,redirect表示要被重定向的新地址，设置为一个路由即可
        { path:"/",redirect:"/user"},
        { path: "/user", component: User },
        { path: "/login", component: Login }
    ]
})

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

Vue中路由守卫的具体使用

目录 1.全局守卫 1.1 全局前置守卫 1.2 全局后置路由守卫 1.3 整合 2. 路由独享的守卫 3.组件内的守卫作用:对路由进行权限控制分类:全局守卫.独享守卫.组件内守卫 1.全局守卫 1.1 全局前置守卫顾名思义,前置守卫主要是在你进行路由跳转之前根据你的状态去进行一系列操作(全局前置是为在路由初始化以及跳转之前都会触发) 你可以使用router.beforeEach注册一个全局前置守卫(Each:每个,即在任意一个路由跳转的时候都会触发) 每个守卫方法接收三个参数: to:
vue3获取当前路由地址

正解使用useRouter: // router的 path: "/user/:uid" <template> <div>user</div> <p>uid: {{ uid }}</p> </template> <script lang="ts"> import { defineComponent } from "vue"; import { useRouter
Vue实现路由嵌套的方法实例

1.嵌套路由又称子路由,在实际应用中,通常由多层嵌套的组件组合而成.(其实就是套娃操作罢了,跟后端的视图跳转路径蛮像的): 2. 创建用户信息组件,在 views/user 目录下创建一个名为 Profile.vue 的视图组件: Profile.vue <template> <h1>咸鱼_翻身1</h1> </template> <script> export default { name: "UserList" } <
Vue router 路由守卫详解

目录一.全局前置beforeEach 1. 全局前置beforeEach 2. 实现二.需求二三.全局后置守卫 afterEach 1. 修改title为自己的title 四.组件内守卫 1. beforeRouteEnter 2. beforeRouteLeave 总结一.全局前置beforeEach 当 Local Storage 里面存储的 name 是 zhangsan 的时候, 点击消息才显示消息内容 1. 全局前置beforeEach 给router添加一个路由守卫 befo
Vue学习-VueRouter路由基础

目录一.VueRouter 1.说明 2.选中路由的渲染: 3.基本工作原理二.实战 1.创建一个带router的vue项目 2.打开项目中的src/router/index.js文件 3.在浏览器中打开项目 4.新建路由一.VueRouter 1.说明用 Vue.js + Vue Router 创建单页应用,感觉很自然:使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 Vue Router 添加进来,我们需要做的是,将组件 (components) 映射到路由 (
Vue路由vue-router用法讲解

目录一.vue-router 1.简介 2.使用流程二.基本路由实现三.嵌套路由四.缓存路由组件 1.为什么使用 2.如何使用 3.完整代码五.传递参数 1.通过url传递(param传递) 2.通过query传递 3.通过param传递六.$route 与 $router 的区别 1.$route 2.$router 3.跳转路由的三种形式一.vue-router 1.简介 (1)SPA:Single Page Application(单页应用),简单理解就是只有一个web页面的
一篇文章带你了解vue路由

目录概念 Vue Router 简介 Vue Router的特性 Vue Router的使用步骤分类嵌套路由动态路由命名路由编程式导航总结概念路由的本质就是一种对应关系,比如说我们在url地址中输入我们要访问的url地址之后,浏览器要去请求这个url地址对应的资源.那么url地址和真实的资源之间就有一种对应的关系,就是路由. 路由分为前端路由和后端路由 1).后端路由是由服务器端进行实现,并完成资源的分发后端路由性能相对前端路由来说较低,所以,我们接下来主要学习的是前端路由2)
一篇文章带你吃透Vue生命周期(结合案例通俗易懂)

目录 1.vue生命周期 1.0_人的-生命周期 1.1_钩子函数 1.2_初始化阶段 1.3_挂载阶段 1.4_更新阶段 1.5_销毁阶段 2.axios 2.0_axios基本使用 2.1_axios基本使用-获取数据 2.2_axios基本使用-传参 2.3_axios基本使用-发布书籍 2.4_axios基本使用-全局配置 3.nextTick和refs知识 3.0$refs-获取DOM 3.1$refs-获取组件对象 3.2$nextTick使用 3.3$nextTick使用场景 3.
一篇文章带你了解Vue组件的创建和使用

目录一.什么是组件? 二.创建全局组件方式一 1.Vue.extend 2.Vue.component 方式二直接使用Vue.component 方式三三. 创建局部组件四.组件中的data 和 methods 五.组件间的通信方式 props/$emit 通过事件形式总结一.什么是组件? 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能. 二.创
一篇文章带你了解vue.js的事件循环机制

目录一.事件循环机制介绍二.经典事件循环面试题总结一.事件循环机制介绍 JS是单线程的语言,浏览器和Node.js定义了各自的Event Loop(事件循环机制)则是用来解决异步问题.将程序分为“主线程(执行栈)”与“Event Loop线程”,“主线程”自上而下依次执行同步任务,“Event Loop线程”将异步任务推入宏任务队列与微任务队列去执行. 事件循环机制从整体上告诉了我们 JavaScript 代码的执行顺序 Event Loop 即事件循环,是指浏览器或Node 的一种解决
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)

一.搭建项目以及初始化配置 vue create ts_vue_btn 这里使用了vue CLI3自定义选择的服务,我选择了ts.stylus等工具.然后创建完项目之后,进入项目.使用快捷命令code .进入Vs code编辑器(如果没有code .,需要将编辑器的bin文件目录地址放到环境变量的path中).然后,我进入编辑器之后,进入设置工作区,随便设置一个参数,这里比如推荐设置字号,点下.这里是为了生成.vscode文件夹,里面有个json文件. 我们在开发项目的时候,项目文件夹内的文件很
一篇文章带你彻底搞懂VUE响应式原理

目录响应式原理图编译创建compile类操作fragment 获取元素节点上的信息获取文本节点信息操作fragment 响应式数据劫持收集依赖响应式代码完善 Dep类全局watcher用完清空依赖的update方法需要注意的一个地方双剑合璧总结首先上图,下面这张图,即为MVVM响应式原理的整个过程图,我们本篇都是围绕着这张图进行分析,所以这张图是重中之重. 响应式原理图一脸懵逼?没关系,接下来我们将通过创建一个简单的MVVM响应系统来一步步了解这个上图中的全过程.
一篇文章带你吃透Vuex3的状态管理

目录一. Vuex是什么 Vue全局事件总线 Vuex状态管理何时使用Vuex 二. 纯vue组件案例计算总数案例添加人员案例三. Vuex工作原理和流程第一种工作流程第二种工作流程生活化的Vuex工作原理四. 在项目中引入Vuex 安装Vuex 创建store 在Vue中挂载store 五. Vuex的核心属性用法单一数据源(state) 状态更新方式(mutations) store中的计算属性(getters) 异步更新状态(actions) 同步增加总数异步增加总数
一篇文章带你搞定SpringBoot中的热部署devtools方法

一.前期配置创建项目时,需要加入 DevTools 依赖二.测试使用 (1)建立 HelloController @RestController public class HelloController { @GetMapping("/hello") public String hello(){ return "hello devtools"; } } 对其进行修改:然后不用重新运行,重新构建即可:只加载变化的类三.热部署的原理 Spring Boot 中热部
一篇文章带你搞定SpringBoot不重启项目实现修改静态资源

一.通过配置文件控制静态资源的热部署在配置文件 application.properties 中添加: #表示从这个默认不触发重启的目录中除去static目录 spring.devtools.restart.exclude=classpath:/static/** 或者使用: #表示将static目录加入到修改资源会重启的目录中来 spring.devtools.restart.additional-paths=src/main/resource/static 此时对static 目录下的静态
一篇文章带你解决 IDEA 每次新建项目 maven home directory 总是改变的问题

Maven是基bai于项目对象模型,可以通du过一小段描述信息来管理zhi项目的构建,报告和文档的软件项dao目管理工具. 重装个系统,各种问题,idea 也出现各种问题装了个新版的 idea 2020 2.x 版本的,不知道咋回事,其他都好使,就是创建 SpringBoot 项目时: 加载 pom.xml 总是出错,原因就是,新建立的项目 maven home directory 总是乱,没有安装设置的默认方式我试了,改当前项目的,不好使该默认设置,不好使,网上的其他方法也试了,很奇怪

一篇文章带你了解vue路由

目录

概念

Vue Router

简介

Vue Router的特性

Vue Router的使用步骤

分类

嵌套路由

动态路由

命名路由

编程式导航

总结

相关推荐

随机推荐