前端路由的使用

最新推荐文章于 2023-05-29 20:40:51 发布
最新推荐文章于 2023-05-29 20:40:51 发布
阅读量815 收藏 3
点赞数 2
分类专栏： 前端学习 新手村 文章标签： 前端 vue.js vscode
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_56733569/article/details/128114041
版权

1、安装路由

打开vscode，找到自己的项目，打开终端，输入以下命令安装路由：

cnpm install vue-router -S

如果你要安装指定版本就在后面加上版本就可以了

cnpm install vue-router@版本号 -S

2、使用路由

在src目录下创建一个存放路由的文件夹router—>在router文件夹下创建index.js文件
在这里插入图片描述
在index.js文件中配置相关路由信息
在这里插入图片描述
在src目录下创建一个views文件夹，存放视图组件，按照不同模块创建相应的文件夹和组件
在这里插入图片描述
在main.js中将刚才导出的路由导入使用—>在App.vue中路由占位，使用路由
在这里插入图片描述
最后在终端执行 npm run dev 启动项目，看到以下界面就证明成功了
在这里插入图片描述

燕哥学前端
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端路由router的使用
m0_63331193的博客
04-17 2293
一. 单页面富应用（SPA） 单页面富应用的理解： 单页面富应用的英文是single-page application，简称SPA； 整个Web应用只有实际上只有一个页面，当URL发生改变时，并不会从服务器请求新的静态资源； 而是通过JavaScript监听URL的改变，并且根据URL的不同去渲染新的页面； 如何可以应用URL和渲染的页面呢？前端路由 前端路由维护着URL和渲染页面的映射关系； 路由可以根据不同的URL，最终让我们的框架（比如Vue、React、Angular）去渲染不同的组件； 最.
前端怎么配置路由
最新发布
2402_84765445的博客
05-25 221
安装并配置路由库：首先需要使用路由库来管理前端的路由，常用的有React Router、Vue Router等。可以使用npm或yarn安装路由库，并在项目中引入路由库的相关代码。配置动态路由：在路由配置文件中，通过定义路由的path、component和其他属性来配置动态路由。创建路由配置文件：在项目中创建一个路由配置文件，用来定义动态路由的具体配置。使用动态路由：在项目中的组件中使用动态路由，可以通过编程的方式进行路由跳转。可以通过路由库提供的API将路由配置文件中的路由注册到项目中。
前端路由配置及使用
爱上编程2705
09-17 4713
前端路由 路由器的功能：在数据通信时帮你选择通信的路线 在vue中的路由，能够帮助我们在一个vue组件中实现其他组件的相互切换。 也就是说，可以通过路由模块，将制定的组件显示在路由视图中。 安装路由模块 npm install vue-router -s 设计路由界面 创建静态路由表 在src中创建router.js import Home from './views/Home' import produce from './views/Produce' export const ro
前端路由的配置教程
ldgjzjmzknbn的博客
09-15 1641
首先在路由界面配置路由，children是配置子路由的 const routes: Routes = [ {path:'',component:HomeComponent} ]; 然后在引入组件： Routes的使用 import { HomeComponent } from './home/home.component'; 在path中不能使用"/"，因为在多个视图间导航时，自由使用相对或者绝对路径 RouteRoutlet的使用： 插座，所有的界面都在本界面的下面显示 RouterL
Vue --前端路由 && vue-router的基本使用
小脆筒style的博客
11-07 331
目录一、前端路由的概念与原理1. SPA 与前端路由2. 什么是前端路由3. 前端路由的工作方式4. 实现简易的前端路由二、vue-router 的基本用法1. 什么是 vue-router2. vue-router 安装和配置的步骤2.1 在项目安装 vue-router2.2 创建路由模块2.3 导入并挂载路由模块2.4 声明路由链接和占位符3. 声明路由的匹配规则 一、前端路由的概念与原理 路由（英文：router）就是对应关系 1. SPA 与前端路由 SPA 指的是一个web网站只有唯一的
前端路由复习、Vue-router的基本使用与常用步骤
qq_45141180的博客
12-15 109
路由 前端路由的概念 前端路由的原理 vue-router的基本使用 vue-router的常用方法 后台管理系统案例 路由的使用步骤 一、在项目中安装vue-router npm install vue-router@3.5.2 -S 二、创建路由模块 src------>router/index.js 导入vue,vur-router，使用Vue.use(‘’)将vueRouter注册为插件 创建路由实例对象，将创建的路由实例对象暴露出去 三、路由的常见用法 路由重定向：
director.js实现前端路由使用实例
10-24
主要介绍了director.js实现前端路由使用实例,director.js是最纯粹的路由注册/解析器,它在不刷新页面的情况下,利用“#”符号组织不同的URL路径,需要的朋友可以参考下
用director.js实现前端路由使用实例
10-20
导演(director.js)是一个轻量级的前端路由库，它允许开发者在不刷新整个页面的情况下，通过URL的“#”哈希部分来控制应用程序的状态和流程。这种技术在单页面应用程序（SPA）中非常常见，因为它可以提供类似多页面...
轻量级前端路由
08-10
描述中提到“自动检测兼容”，意味着这个轻量级前端路由库会自动判断浏览器是否支持History API，并相应地选择使用哈希模式或历史模式。这种适应性使得开发者无需关心浏览器兼容性问题，提高了代码的可移植性和可用...
前端学习---Vue(6)路由
Michelle209的博客
05-29 1002
Hash地址与组件的对应关系。Hash:url中#之后的都是Hash地址 location.hash。
微前端——组合式应用路由分发
xiaonankeji的博客
05-23 861
组合式应用路由分发：是实现微前端的一种方式，我们以npm包的形式发布组件，然后在基座按需引入。各个npm包可以由不同的团队分开开发，但是开发时也要遵循一定的规范。
Vue基础知识总结 11：前端路由vue-router
热门推荐
学Java，找哪吒
10-13 4万+
当打包构建应用时，JavaScript包会变得非常大，影响页面加载。如果我们能吧不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
前端——router路由
helloyangkl的博客
11-16 376
前端——router路由
实际前端项目路由配置
实践求真知
11-22 797
一 组件定义 1 创建vue组件 在src/views文件夹下创建以下文件夹和文件 2form.vue <template> <div class="app-container"> <h1>讲师管理</h1> <p>讲师表单</p> </div> </template> 3 list.vue <template> <div class="app-.
20-前端路由相关配置
weixin_52135717的博客
11-23 293
20-前端路由相关配置 第一步在router创建路由index.js文件,并且进行路由的配置 //配置相关路由的信息 import VueRouter from 'vue-router' import Vue from 'vue' import Home from '../components/Home.vue' import About from '../components/About.vue' //1.通过vue.use(插件),安装插件 Vue.use(VueRouter) //2.创建路由对象
前端路由的实现(一)
weixin_30885111的博客
04-17 127
“更新视图但不重新请求页面”是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现主要有两种方式： 利用URL中的hash（“#”） 利用History interface在 HTML5中新增的方法 vue-router是Vue.js框架的路由插件，下面我们从它的源码入手，边看代码边看原理，由浅入深观摩vue-router是如何通过这两种方式实现前端路由的。 模...
ELADMIN学习第二次——菜单路由（前端）
m0_53244895的博客
11-22 627
例如，用hidden属性去隐藏一个选项卡对话框种的面板是不正确的，因为选项卡界面只不过是溢出显示的一种——一个可以等量于一个只显示所有 form 表单控件的拥有滚动条的大页面。类似地，用 hidden 属性在某个特定板块中隐藏一部分内容也是不正确的，——如果某些内容被标记为隐藏，它将从所有版块中隐藏，包括例如屏幕阅读器。： 代表该路由信息要作为菜单目录显示，就是可以收缩，下面还有子路由，通常当一个菜单下面只有一个子菜单的时候就不做分级展示，所以在组件里面是通过alwaysShow这个属性控制的。
vue两个页面跳转
大海无量的博客
10-27 7721
如现在有两个页面Login和Home，路由配置在index.js中： import Vue from 'vue' import Router from 'vue-router' // import HelloWorld from '@/components/HelloWorld' import Login from '@/components/views/login/Login.vue' imp...
前端路由模式hash和history的区别与选择
m0_47434144的博客
06-26 1078
两者之间的区别如下：1、表现形式：（1）hash模式下地址栏会带有#/（路径）（2）history模式下地址栏则不会带其他符号，显得更美观优雅 2.原理上的区别：1、hash值改变会触发hashchange事件来查找对应的路由规则，浏览器的前进后退也能对其进行控制，查找对应的路由规则2.history原理： 利用H5的 history中新增的两个API pushState() 和 replaceState() 和一个事件onpopstate监听URL变化3、实现上：（1）hash一般使用在To B的项目里，
微前端能否使用动态路由
06-01
微前端可以使用动态路由，但需要注意以下几点： 1. 路由匹配规则：使用动态路由时，需要确保主应用和子应用之间的路由匹配规则能够正确匹配。 2. 路由前缀：使用动态路由时，需要为每个子应用指定一个路由前缀，以...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值