Vue微型项目（五）—— 创建路由规则以及显示路由视图

最新推荐文章于 2022-12-18 15:33:52 发布
最新推荐文章于 2022-12-18 15:33:52 发布
阅读量488 收藏 1
点赞数
分类专栏： JS技术 node.js vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Claire_Moon/article/details/100125490
版权

在前几篇文章中，我们抽离了各个页面以及底部组件，接下来是添加路由规则。

@vue/cli脚手架在创建项目时，选择了vue-router，所以无需再次安装，但是如果你没有选择，可以使用 cnpm i vue-router -S 安装，本项目中关于路由的文件在src/router.js

1. 创建路由规则的两种方式

我们先看一下router.js文件中原来的路由配置是怎么样的，打开发现，给我们写了两种配置路由的方式，分别如下：
方式一： 给出相对路径，名字
方式二：使用懒加载，用到哪个页面再加载哪个，不用就不加载，可以优化性能，即优化路由性能的时候可以使用懒加载。但是要使用绝对路径，这里大部分采用第二种方式
在这里插入图片描述

2. 添加路由规则
  • 修改router.js文件
    知道了2中方式可以添加路由规则之后，我们就可以把原来有的路由规则代码给删掉了，自己写
最低0.47元/天 解锁文章
Claire小柒
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
VUE 路由 规则 中 定义 参数
qq_46179813的博客
09-14 365
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="js/vue.js"></script> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"&gt
laravel 访问时自动生成路由规则
PHP开发
05-13 2122
路由访问时自动生成 //路由访问时自动生成 if (php_sapi_name() != 'cli') { $middleware_default='checkLogin';//默认中间件 $middleware_other=['api'=>'checkApi'];//其它中间件 \App\Library\Common::createRoute($_SERVER...
【Vue】Vue的路由
早睡早起长头发的博客
08-19 5047
一、Vue的路由 1.路由 2.前端路由 3.VueRouter路由 4.VueRouter的组成 5.VueRouter常用的函数 二、VueRouter的使用 1、安装vue-router 2、创建路由文件 3、声明路由请求接口 4、声明路由出口 三、动态路由 1.动态路由的路径格式 2.在URL中带查询参数 3.通配符匹配 四、嵌套路由 五、命名路由 六、命名视图 1.给路由视图添加name属性 2.在路由表中，指定components属性的值 七、导航守卫 1.路由导航的方式 2.导航守卫
vue2.0路由规则和传参
zhang的博客
07-20 576
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt;     &lt;meta charset="UTF-8"&gt;     &lt;title&gt;Title&lt;/title&gt;     &lt;script src="vue.js"&gt;&lt;/sc
Vue小项目之路由及表格相关操作
cgl_dong的博客
09-13 280
Vue小项目之路由及表格相关操作 vuecli搭建 一、效果演示 二、代码 这个项目用了许多vue的相关功能 App.vue 略去样式 <template> <div id="app"> <Click :msgs="msgs"></Click> <router-link to="/Hello" tag="h3">...
解决vue脚手架项目打包后路由视图不显示的问题
10-18
总结来说，解决Vue CLI项目打包后路由视图不显示的问题，关键在于正确配置Vue Router的`base`选项，并在服务器端设置适当的路由重定向。这需要开发者对前端路由和服务器配置有深入的理解。通过这些调整，你的Vue项目...
vue vuex vue-rouert后台项目——权限路由（适合初学）
11-30
项目地址： vue-simple-template 共三个角色：adan barbara carrie 密码全是：123456 adan 拥有 最高权限A 他可以看到 red , yellow 和 blue 页面（共三个页面） barbara 拥有 权限B 他可以看到 red 和 yellow 页面 ...
vue新建项目并配置标准路由过程解析
10-15
总结来说，Vue中的路由配置包括创建Router实例，定义路由规则，导入并使用`router`实例，以及在`App.vue`中使用`<router-view>`来展示路由对应的组件。这个过程对于理解Vue应用的结构和导航逻辑至关重要，是每个Vue...
Aeraki 教程系列：如何设置路由规则？
zhaohuabing_ce的博客
02-17 331
Aeraki 可以帮助你在服务网格中管理任何七层协议。目前 Aeraki 已经支持了 Dubbo、Thrit、Redis 等开源协议。你还可以使用 Aeraki 的 MetaProtocol 协议扩展框架来管理私有协议的七层流量。 本系列教程将介绍如何通过 Aeraki 来在服务网格中为 Dubbo、Thrift 等协议的服务提供七层流量路由、本地限流、全局限流，以及如何基于 Aeraki Protocol 快速开发一个自定义协议，并在 Istio 服务网格中对采用自定义协议的服务进行管理。 本篇教程介
Vue项目里如何使用路由（一）
qq_52264068的博客
12-18 1737
Vue项目里如何使用路由
Vue路由系统思维导图
weixin_64840384的博客
02-23 554
# vue的路由及简单显示
weixin_45953930的博客
06-02 601
Vue中会使用官方提供的vue-router插件来使用单页面，原理就是通过检测地址栏变化后将对应的路由组件进行切换（卸载和安装） 如何使用路由（router） 1.安装依赖 npm install vue-router -g 2.创建组件 引入vue-router，如果是在脚手架中，引入VueRouter之后，需要通过Vue.use来注册插件 src/router/index.js文件 import Vue from 'vue' import Router from 'vue-router//引入vue-r
mvc 创建一个规则 route
wwttqq85538649的专栏
02-10 698
<br /> Dictionary<string, object> defaultDict = new Dictionary<string, object>(); defaultDict["action"] = "Index"; defaultDict["id"] = 0; RouteValueDictionary defaultRouteValue = new RouteValueDictionary(defaultDict)
Vue进阶 (路由基础、路由进阶、获取路由传递数据、路由元数据、嵌套路由、命名视图)
zzDAYTOY的博客
07-02 266
路由基础 安装Vue-router 一 、使用 Vue-cli 安装时，选中集成 Vue-router 二 、使用 npm 安装 npm install vue-router -s 集成 创建vue-router对象 import Home from "./Home.vue" ;//将路径和组件一一对应，每一个配置项就是一条路由 const routes = [ { path:"/", name:"Home" component:Home }, { },
路由基本创建
ZDM_9999的博客
11-17 82
路由导航
无废话MVC入门教程三[路由设置及视图入门]
卖鱼的小白菜的专栏
07-20 663
本文目标
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。
zuul 自定义路由规则
chishepao1742的博客
12-26 1121
1，zuul的maven配置 <!--spring cloud 相关包--> <parent> <groupId>org.springframework.boot</groupId> <artifac...
网关服务自定义路由规则（springcloud+nacos）
软件老王
10-21 2762
1. 场景描述 需要给各个网关服务类提供自定义配置路由规则，实时生效，不用重启网关（重启风险大），目前已实现，动态加载自定义路由文件，动态加载路由文件中的路由规则，只需在规则文件中配置下规则就可以了 2.解决方案 2.1 解决思路 新建总的监控总类，监控网关服务路由规则配置文件，然后每个路由配置文件再监控内容自己文件内容是否变化，动态加载到springclou gateway中。 2.2 配置规则...
创建一个带动态路由的vue项目
最新发布
04-04
为了创建一个带动态路由的Vue项目，你可以按照以下步骤进行操作： 1. 安装Vue CLI 首先，你需要安装Vue CLI，这是一个命令行工具，可以帮助你快速创建一个Vue项目。你可以通过以下命令进行安装： ``` npm install -g @vue/cli ``` 2. 创建一个新的Vue项目 安装完Vue CLI之后，你可以使用以下命令来创建一个新的Vue项目： ``` vue create my-project ``` 其中，my-project是你的项目名称。在项目创建过程中，你可以选择手动配置或使用默认配置。 3. 安装Vue Router 接下来，你需要安装Vue Router，这是一个Vue官方提供的路由管理库。你可以通过以下命令进行安装： ``` npm install vue-router --save ``` 4. 在Vue项目中配置路由 安装完Vue Router之后，你需要在Vue项目中配置路由。你可以在src目录下创建一个router文件夹，并在其中创建一个index.js文件。 在index.js文件中，你可以按照以下代码配置路由： ```javascript import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const routes = [ { path: '/home', name: 'Home', component: () => import('../views/Home.vue') }, { path: '/about', name: 'About', component: () => import('../views/About.vue') } ] const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes }) export default router ``` 在这个例子中，我们定义了两个路由，分别是/home和/about。其中，component属性指定了路由对应的Vue组件。 5. 在Vue项目中使用路由 在完成路由配置之后，你需要在Vue项目中使用路由。你可以在App.vue文件中添加以下代码： ```html <template> <div id="app"> <router-view/> </div> </template> <script> export default { name: 'App' } </script> ``` 在上面的代码中，我们使用了<router-view/>标签来渲染路由对应的组件。 6. 运行Vue项目 最后，你可以使用以下命令来运行Vue项目： ``` npm run serve ``` 在运行成功后，你可以访问http://localhost:8080/home来查看你的Vue项目中的路由效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值