vue-router基本搭建

最新推荐文章于 2024-04-29 22:22:14 发布
最新推荐文章于 2024-04-29 22:22:14 发布
阅读量136 收藏
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Menqq/article/details/107796188
版权

vue-router能够让单页面拥有看似和多页面应用一样效果

vue-router是：

a、实现更新视图但是并不重新请求页面
b、url路径和网页一一对应

创建案例时勾选Ruoter:
在这里插入图片描述
项目搭建成功后目录中生成router文件夹与views文件夹：
在这里插入图片描述
在浏览器中运行，顶部多出两个链接Hom/About：
在这里插入图片描述
点击两个链接Hom/About页面切换的同时顶部url地址处也会改变：

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

门门men
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在Vue-cli中搭建router环境
ZH
08-20 328
环境搭建 创建项目 设置router-view 找到App.vue 删除App.vue中关于HelloWorld组件的多余部分，并且删除样式。在div#app中添加router-view <template> <div id="app"> <router-view></router-view> </div> </te...
项目vue-router的构建
weixin_43697548的博客
04-21 490
基于vue/cli3.0+脚手架搭建Vue项目(02) 文章目录基于vue/cli3.0+脚手架搭建Vue项目(02)前言一、vue-router简介二、vue-router的构建1.安装前端依赖2.创建router文件3.验证路由总结 前言 上一篇文章介绍了创建Vue项目过程，接下来则是准备用几个篇章来初始化项目 一、vue-router简介 要基于 Vue 框架构建单页面应用，Vue Router是不可或缺的前端依赖库， Vue 官方提供的前端页面路由管理器 二、vue-router的构建 1.安
快速搭建你的第一个vue-router
weixin_43582313的博客
06-07 89
首先安装vue-router npm install vue-router 安装之后在index.js里引入vue-router import Vue from "vue"; import VueRouter from "vue-router"; import App from "./App"; import IndexPage from "./pages/index.vue"; import DencitySetModal from "./pages/DencitySetModal.vue"; Vue
vue-router，分享第一次搭建路由跳转，初学者视角搭建
Tlin31的博客
10-17 155
纯新手搭建vue-router路由跳转，包含一些注意事项！
从零开始搭建vue-route路由
weixin_44289670的博客
12-10 412
vue路由router的创建 1、首先用脚手架搭建一个项目 2、使用npm下载包npm install vue-router （不清楚的小伙伴看我前面的文章） npm install vue-router 3、src目录下新建一个router文件夹，文件夹中新建index.js 4、在main.js文件中导入文件 import router from '@/router/index.js' i...
vue-vue-router-vuex项目实战——环境搭建运行
chunchayong9507的博客
05-11 139
node环境、npm npm全局安装vue-cli，npm install -g vue-cli（安装一次后，下次不用安装） 用vue-cli构建项目，进入存放项目的路径，vue init webpack project npm install（建议用淘宝源cnpm，安装速度快，避免有些依...
Vue脚手架结构及vue-router路由配置
qq_38921534的博客
06-11 1万+
首先官网介绍，用 Vue.js + vue-router 创建单页应用，是非常简单的。使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 vue-router 添加进来，我们需要做的是，将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。先介绍下Vue脚手架结构： 在我们搭建vue环境之后，会生成一个文件夹，如图：一级文件夹...
vue + vue-router + webpack 实践 手动搭建环境 进阶篇(二)
何平的博客
10-29 946
vue + vue-router + webpack 实践 手动搭建环境 进阶篇(二) 基础篇在这儿！ 地址：https://github.com/hepingmogul/vue-demo/tree/master/vue-demo-1 什么是前端路由器？ 查看地址：https://blog.csdn.net/weixin_40415614/article/details/83505153 ...
Vue Router的安装与基本使用方法
最新发布
qq_40930841的博客
04-29 1176
一、了解为何使用路由•具体使用示例：网易云音乐•单页面应用(SPA)：所有功能在一个html页面上实现•前端路由作用：实现业务场景切换（一个路由路径对应一个组件）•优点：整体不刷新页面，用户体验更好，数据传递容易，开发效率高。•缺点：首次加载（要加载所有的静态资源）会比较慢一点。1.vue-router模块yarn。
Vue开发环境搭建
mr_raptor的专栏
08-15 1万+
一、业务介绍公司业务比较偏向于电商平台，有以下几个模块：1. C端用户注册与登录2. B端用户注册与B功能申请、审核、发布内容、下架内容3. C购买B端内容，订单流程，交易流程，财务流程，钱包功能4. 运营内容等等二、框架选择H5三端适配必然要考虑架构选择，从以下几个主要的帖子选择选择Vuejs：尤神的框架对比：http://cn.vuejs.org/guide/comparison.htmlht
vue路由router的使用与搭建
marendu的博客
05-29 1万+
vue路由router的使用与搭建 前端路由 hash值方式#/id不会向服务器发起请求，根据hash值的改变，对应渲染不同的前端组件 history方式无#号 router配置 import Vue from 'vue' VUe.use(ROuter) export default new Router({ mode:'history'//是否使用history模式不传默...
vue-router 例子程序搭建
liubangbo的专栏
12-16 105
想看一下vue-router 源代码，所以要先搭建一个环境。 1） 下载Vue.js 源代码 https://cn.vuejs.org/v2/guide/installation.html 中选择开发版本，就可以把vue.js下载下来了 2） 下载vue-router源代码 https://router.vuejs.org/zh/installation.htm...
Vue 路由(vue-router)的创建和讲解 超详细！！！
m0_73783485的博客
08-11 1295
什么是单页面程序？所谓的单页面程序就是一种特殊的Web应用程序它将所有的内容都显示在一个Web页面中，在Web页面初始化时加载相应的(所有的)HTML、Css、Javascript,页面加载完后不会因为用户的操作而进行重新加载和跳转，而是利用Javascript动态的变换HTML也就是现实和隐藏从而实现用户的交互，因为所有的内容都处在一个Web页面中所以首次加载的时候会比较慢。现在SPA我们熟悉了那么我们如何去实现一个单页面的Web程序可以根据用户的需求去显示不同的内容呢？这时我们的路由就来了！
vue-router 路由超详细教程
热门推荐
weixin_47124112的博客
09-06 3万+
路由（英文： router）就是对应关系Hash 地址与组件之间的对应关系。vue-router是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用，能够轻松的管理 SPA 项目中组件的切换。vue-router 的官方文档地址：https://router.vuejs.org/zh/2. vue-router 安装和配置的步骤① 安装 vue-router 包② 创建路由模块③ 导入并挂载路由模块④ 声明路由链接和占位符2.1在项目中安装 vue-router。
vue-router 路由创建简单流程
weixin_49832841的博客
04-16 4503
一、什么是路由？ 二、使用步骤 1.创建项目 2.安装路由 3.创建文件 三.运行项目
vue学习之二：vue-router简单配置搭建单页应用
草灯的专栏
07-12 7737
现在很多主流的vue项目都是采用的单页路由模式来搭建的，我们也来赶个时尚，采用的官方提供的vue-router来构建一个简单的企业站。如果还不知道vue-router路由机制的，请右转直走：https://router.vuejs.org/zh-cn/，先把基础教程看一下再来实践一下。     官网对于vue-router的介绍如下： 用 Vue.js + vue-router 创建单
三十分钟学会使用vue-router搭建单页应用（SPA）
越努力，越幸运！
10-11 1835
一、什么是单页应用 单页web应用（single page web application，SPA），就是只有一张Web页面的应用。单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。浏览器一开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这张页面上完成，都由JavaScript来控制。因此，对单页应用来说...
Vue学习笔记进阶篇——vue-router安装及使用
智轩软件的专栏
12-29 5195
介绍 vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。 本文是基于上一篇文章（Vue学习笔记进阶篇——vue-cli安装及介
Vue创建一个路由项目(Vue Router)
黛琳ghz的博客，期待你的关注。
04-27 3050
💻什么是Router Vue Router 是Vue.js的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。功能包括： 嵌套路由映射 动态路由选择 模块化、基于组件的路由配置 路由参数、查询、通配符 展示由 Vue.js 的过渡系统提供的过渡效果 细致的导航控制 自动激活 CSS 类的链接 HTML5 history 模式或 hash 模式 可定制的滚动行为 URL 的正确编码 开始创建 鼠标右键这个微软logo 然后点击Wi...
vue-router介绍
05-27
Vue Router 可以让我们像搭建组件一样地定义前端路由，将不同的 URL 请求映射到对应的组件，实现单页应用（SPA）的路由管理。 Vue Router 的核心功能包括： 1. 嵌套路由和视图：Vue Router 支持嵌套路由，可以让...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值