vue-router的新奇写法

最新推荐文章于 2022-03-23 11:25:06 发布
最新推荐文章于 2022-03-23 11:25:06 发布
阅读量94 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/maomao93/p/8000640.html
版权

加班中。。。。。。。。。。。。。。。。。。。。。。。。。。。

 

我们以前写路由是下面这样的

这导致了页面一多，我们的路由文件内容就比较多，不好看。

下面我为大家介绍一下，新的一种写法

这种写法，我们只需定义一个根目录，然后通过全局组件，通过正则匹配组件名替换组件就好了，这使得router文件不需要写很多东西。

 

以上两种写法都可以，第一种写法的好处是，不管谁接手这个项目，都可以清楚的找到页面路由，便于后期维护。

第二种写法虽然可以，但是有个缺点就是，后期维护，别人接手的话，是找不到组件的

 

转载于:https://www.cnblogs.com/maomao93/p/8000640.html

weixin_34062329
关注
请收藏-手把手教你写VueRouter
gg7894125的博客
08-18 314
Vue-Router提供了俩个组件 router-link router-view， 提供了俩个原型上的属性$route $router ，我现在跟着源码来把它实现一下 开始 先看平时使用的 Vue-Router ,引入Router , Vue.use 注册插件。直接从这里开始入手 使用场景 复制代码 import Vue from ‘vue’ import Router from “…/vue-router” import routes from ‘./routes’ Vue.use(Router) le
vue基础5 Vue-router
weixin_46513544的博客
10-06 464
# 前后端交互模式 ```c 接口的调用 - 原生ajax - JQuery 的ajax - fetch - axious URL地址格式 1、传统形式的URL 格式：schema://host:port/path?query#fragment schema:协议，例如http https ftp host:域名或者是IP地址 port:端口，http默认端口80，可以省略 path:路径，例如/abc/a/b/c query:查询参数。例如uname=list&age=12 frag...
vue-router的另一种写法
艾斯科特
06-08 920
今天看视频,看到了vue-route的另一种写法,0.7.13版本的写法,上古版本,好像写老版本没多大意义,但感觉做下对比还是能加深一下 印象.导入,use和创建实例都没变 :import VueRouter from 'vue-router'; Vue.use(VueRouter) ; router =new VueRouter();但是创建路由规则的时候变了:新写法 是创建实例时,将路由规...
vue-router的基本框架及写法，router-view与router-link
weixin_42738354的博客
10-25 3263
一.安装和使用vue-router 步骤一：安装vue-router:npm install vue-router --save 步骤二：在模块化工程中使用它 如果使用Vuecli脚手架，在配置时选择安装，则我们可以在src文件夹中找到router文件夹，并且其中会包含index.js文件，在这个js文件中，我们将配置所有的路由相关的信息 1.搭建路由框架 第一步：导入路由对象，并且调用Vue.use(VueRouter) 第二步：创建路由实例，并且传入路由映射配置 第三步：在Vue实例中挂载创建的路由实
10分钟教你 手写 Vue-Router
CS_DGD的博客
11-19 1012
手写之前我们先来分析一下 Vue-Router 原理，他内部有两种模式，也就是 Hash 和 History...
vue-router-sitemap-通过vue-router配置生成sitemap.xml-Vue.js开发
05-27
vue-router-sitemap通过vue-router配置安装npm i --save vue-router-sitemap示例用法// router.js import VueRout vue-router-sitemap通过vue-router配置生成sitemap.xml安装npm我-保存vue-router-sitemap示例用法//...
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-invoke-webpack-plugin:根据文件目录自动生成vue-router的路由
05-14
根据文件目录自动生成vue-router的路由。 安装 npm npm install vue - router - invoke - webpack - plugin - D cnpm cnpm install vue - router - invoke - webpack - plugin - D 纱 yarn add vue - router - ...
vue-router.js
12-30
vue路由vue-router.js文件下载
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统
05-02
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+...
【Vue路由（router）进一步详解】
热门推荐
小田是个程序员的博客欢迎你的到来呀~
03-23 3万+
文章主要从Vue-router（路由）常用的几个属性以及参数配置出发，更深一层了解路由在实际开发中的使用，结合实例向大家说明路由常用的参数配置，以及使用路由的一些小技巧。
vue.js 路由写法
GoodIdea
02-12 6791
介绍 路由：控制组件之间的跳转，不会实现请求、不用页面刷新，直接跳转-切换组件》》》   安装 本地环境安装路由插件vue-router：    cnpm install vue-router --save-dev    *没有安装淘宝镜像的可以将 cnpm 替换成 npm 想要安装的可以看这篇文章http://www.cnblogs.com/padding1015/p/7162024...
Vue学习笔记——Vue-router
Stephen-James
02-24 2万+
第1节：Vue-router入门 1、解读router/index.js文件 import Vue from 'vue' //引入Vue import Router from 'vue-router' //引入vue-router import Hello from '@/components/Hello' //引入根目录下的Hello.vue组件 Vue.use(Route...
vue router 声明式导航新老版本的写法
Drizzlejj的博客
01-12 493
0.a 链接 <li><a href="/#/films">电影</a></li> <li><a href="/#/cinermas">影院</a></li> <li><a href="/#/center">我的</a></li> 1. 看 dom 结构，这种是有 a 标签的。 <li><router-link to="/films"
Vue-router template书写规范/写法/反斜杠
PlusChang的博客
10-14 5016
template书写规范/写法/反斜杠 template Vue-router template怎么写 怎么加\ template报错
vue之router路由最优美写法，懒加载、打包代码分离。
前端技术栈
03-07 4777
几种常用路由写法一、基础写法，没有懒加载，打包分离代码二、路由懒加载，import()方法。（按需加载）三、vue的异步组件，require()方法。（按需加载）四、vue的异步组件+webpack的ensure()方法。（按需加载+js打包分离）五、最优官方，懒加载和打包分离代码。（【官方推荐】按需加载+js打包分离） 一、基础写法，没有懒加载，打包分离代码 官方最基础的路由写法 impor...
vue 路由写法
天天的博客
03-28 4669
每一次学习，虽然学习的进度非常慢，但是要多做笔记，做多了，自然就掌握的多一点！ 有一个痕迹，回头复习的时候，你会很开心，因为是你自己写的，及时很烂，但是都没有任何关系，坚持就好！ 好，我们开始！ 1， 新建一个目录： 1， npm init -y 这个时候： 为啥用webpack 打包写，因为可以采用es6 的模块化写！ 2， npm i vue vue-ro...
Vue-router(路由最优写法，路由守卫)
qq_52151772的博客
03-31 1341
最优写法
vue-vue.router写法
jieweiwujie的博客
09-05 342
importVuefrom'vue' importVueRouterfrom'vue-router' Vue.use(VueRouter) constroutes=[ { path:'/', name:'object', component:()=>import('../views/object.vue') }, { path:'/directive', name:'directive', ...
深入理解vue-router：单页应用的路径管理
过监听hashchange事件，vue-router可以捕捉到URL的变化，进而更新对应的组件。 2、History模式： History模式利用了HTML5新增的History接口和PushState、ReplaceState方法，它可以让开发者改变location对象的hash，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值