28-vue中vue-router-基本路由的理解和使用

最新推荐文章于 2022-11-12 21:17:38 发布
最新推荐文章于 2022-11-12 21:17:38 发布
阅读量334 收藏
点赞数 1
分类专栏： Vue尚硅谷学习旅程 文章标签： vue vue.js
本文为博主原创文章，未经博主允许不得转载
本文链接：https://blog.csdn.net/a_bow/article/details/113844421
版权
本文介绍了前端路由的基本概念，它是一种映射关系，用于管理页面跳转。通过路由，前端可以仅加载所需部分，提升用户体验。路由配置包括定义组件、注册路由、配置路由器和界面代码实现。设置默认路由使得应用启动时能直接展示指定页面。
摘要由CSDN通过智能技术生成

什么是路由
  路由 是一种映射关系： k-v
  k是path
  v是value，前端value是组件；后端value是 回调函数。
  路由器 管理 路由
 
路由的优点：
  用户体验好，不需要每次都从服务器全部获取，快速展现给用户
 
路由(包含嵌套路由的使用)的使用
  ①定义路由组件(在views文件中写)
  ②注册路由：将路由组件映射成路由(创建路由器router文件)
  ③配置路由器(在main.js中配置) ,只需要一次即可。
  ④写界面代码（在路由组件 被引用的 父组件里写(例如App.vue)，用到 标签）

代码图片示例
  ①定义路由组件(在views文件中写)
在这里插入图片描述

  ②将路由组件映射成路由(创建路由器router文件)
在这里插入图片描述

  ③配置路由器(在main.js中配置)

在这里插入图片描述

  ④写界面（在App.vue，用到 标签）
在这里插入图片描述
补充
  设置路由组件的默认显示
在这里插入图片描述

不许人间见秃头xbw
关注
专栏目录
Vue实践--V-for指令
codesWay的博客
12-04 1万+
当需要将一个数组或者对象循环遍历显示的时候可以使用v-for指令，其值类似于item in items；其中items是数组或者对象，item自然就是其中的一项，in 也可使用 of。 当遍历数组的时候有一个可选项index，是当前项的索引 类似与 v-for = (item,[index]) in items; {{index}}.{{book.bookName}}
vue自定义组件与路由新手使用
qq_38735996的博客
01-17 2375
1。百度使用vue-cli创建一个模板项目 2.创建项目之后，目录如下： 3.项目目录： components存放自己定义的组件， 其中组件是以.vue结尾的文件 4.创建自定义组件，以header.vue为例 组件的格式均为如下格式，有template标签，script标签，style标签， template标签用来定义该组件在页面上现实的内容，script标签内容是该组件包含...
【Vue】Vue-Router 路由的理解和使用（1）
最新发布
看花容易绣花难
11-12 544
Vue-Router 路由的理解和使用（1）
Vue-Router的使用与理解
鸟人的博客
08-15 132
前面我们只是做了一些简单的组件的组合，但是涉及到复杂的页面就需要使用Vue-Router帮我们进行页面之间的跳转了。
VUE 路由的配置
weixin_46105796的博客
11-09 230
VUE 路由的配置 首先在路径./src/views 下创建一个demo页面 在./src/router/index.js 中修改已下内容： 上图是将demo1页面当成组件引入路由，下图组件名便是demo1. 修改后，一定要注意VUE代码规范，如果不规范会出现很多错误，至此在浏览器输入src便可以打开相应页面啦！ ...
两个数组判断含有相同项并添加K：V属性值
FellAsleep的博客
07-07 1027
场景：两个不同的数组，一个数组和另一个数组比较，如果另一个数组存在某一项与自身数组的某一项相符合，就往自身添加某个属性， 比如用于控制disabled
vue-router-nav-呈现vue-router路由的简约响应式导航栏。-Vue.js开发
05-27
vue-router-nav呈现vue-router路由的简约响应式导航栏。 观看演示。 依赖关系您需要拥有vue-router insta vue-router-nav简约的响应式导航栏，用于呈现vue-router的路由。 观看演示。 依赖关系您需要安装vue-router...
深入Vue-Router路由嵌套理解
12-09
接着我继续追问…(省略)…大致明白了情况，原来这位朋友没有理解Vue-Router嵌套的原理，下面整理了一下我对Vue-Router路由嵌套的理解 Vue-Router嵌套路由 首先假设项目中有两个路由Profile和Posts，按写法把他们...
Vue 学习笔记（八）vue-router路由使用详解
FATCATS博客
03-09 321
vue-router路由使用详解 1.安装路由 npm install vue-router --save-dev 2.将项目置入IDEA中打开 （删除自带的logo以及conponents组件，创建自己的项目环境） 3.在components中创建（ConponentOne.vue）和（ConponentTwo.vue） 组件一：ConponentOne.vue <template> <h1>组件一</h1> </template> <scrip
vue-router：嵌套路由的使用方法
01-21
我们已经学习过了Vue模板的另外定义形式，使用<template></template>。 <!-- 模板抽离出来 --> 首页 新闻 然后js里定义路由组件的时候： // 1. 定义（路由）组件。 const Home = { template: ...
Vue学习笔记08：Vue Router 路由的基本使用
HHHBan的博客
11-25 492
文章目录一、前端路由的概念与原理1. 什么是路由2. 前端路由的工作方式3. 实现简易的前端路由二、vue-router 的基本使用1. 什么是 vue-router2. vue-router 4.x 的基本使用步骤2.1 在项目中安装 vue-router2.2 定义路由组件2.3 声明路由链接和占位符2.4 创建路由模块三、vue-router 的高级用法1. 路由重定向2. 路由高亮3. 嵌套路由3.1 声明子路由链接和子路由占位符3.2 通过 children 属性声明子路由规则4. 动态路由匹配4
weblogic中servlet报404_weblogic中ServletActionContext.getServletContext().getRealPath("/")空指针的解决...
weixin_39652136的博客
12-21 697
问题：在weblogic war 路径 getServletContext().getRealPath()和request.getRealPath，weblogic获取路径总是为NULL，怎么破？？？？？通常情况下载tomcat中，我们以前使用 HttpServletRequest request;request.getRealPath(arg0)但是这是个方法已经过时了。。。。。。。。reque...
前端路由（v-router）
m0_60782710的博客
04-03 5459
1.什么是路由 路由（英文：router）就是对应关系 2.什么是前端路由 通俗易懂的概念：Hash地址（就是之前理解的锚链接）与组件之间的对应关系 而hash地址指的就是锚链接后面的值举个例子： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
搞懂Vue-Router的概念和使用，看完这篇文章就够了
前端探险家的博客
03-02 2882
Vue-Router一. 前言二. 对SPA应用的理解三. 后端路由和前端路由四. 项目中路由基本使用五. 路由传参六. 路由守卫七. history模式和hash模式的区别 一. 前言 说到路由，大家都会第一时间想到上图生活中的路由器；可以看到路由器上有几个网线口，每个网线口连接着一台电脑； 我们可将路由器的网线口看作key值，连接的电脑看作value值，每一个key对应着一个value，这就是路由；路由就是一种对应关系； 而多个路由（route）是由路由器（router）管理的，这就是两者的关系； 生
vue组件及路由
weixin_45571513的博客
07-22 168
组件（Component）是 Vue.js 最强大的功能之一。 组件可以扩展 HTML 元素，封装可重用的代码。 var app = new Vue({ el: '#app', // 定义局部组件，这里可以定义多个局部组件 components: { //组件的名字 'Navbar': { //组件的内容 template: '<ul><li>首页</li>&lt
基于vue-router 多级路由redirect 重定向的问题
10-18
在 vue-router 中，可以在模板中使用 <router-link> 标签进行导航，并通过 :to 属性传递参数。如果直接在 <router-link> 标签中传参存在问题，可以使用编程式导航，即通过 this.$router.push 方法来跳转页面，并传递...
vue-router基本路由的使用
weixin_42116120的博客
06-12 171
vue-router是官方提供的实现SPA的vue插件，下载命令：npm install vue-router --save 编写使用路由的三步： 1.定义配置路由组件 2.注册路由器 3.使用路由 实例： 1）创建两个路由组件：Food.vue Grament.vue Food.vue: <template> <div> <ul> <li>甜品饮料</li> <li>火锅烧烤&
Vue router在Visual Studio Code中的安装与使用
qq_44629323的博客
07-24 3723
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有： 嵌套的路由/视图表 模块化的、基于组件的路由配置 路由参数、查询、通配符 基于 Vue.js 过渡系统的视图过渡效果 细粒度的导航控制 带有自动激活的 CSS class 的链接 HTML5 历史模式或 hash 模式，在 IE9 中自动降级 自定义的滚动条行为 1.安装Vue router 1.先新建一个vue，把他拉进Visual Studio Code 在Visu
vue.js的路由配置
Sakuraaaaaaa的博客
08-30 752
vue.js： 招聘管理， 企业管理的页面优化， 招聘管理的页面优化， 文章管理。 路由vue-router： 初始化工程， 页面逻辑结构分析， 自定义路由， 动态路由， 嵌套路由。
vue-router路由传参
weixin_33851177的博客
05-24 176
tip: 用params传参，F5强制刷新参数会被清空，用query，由于参数适用路径传参的所以F5强制刷新也不会被清空。（传参强烈建议适用string） 也可以选用sessionstorage/localstorage/cookie存储，可以参考我的另一边文章：sessionstorage、localstorage与cookie params:参数不会显示到路径上 1：配置路径rutes ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值