当前位置:首页 > wifi设置知识 > 正文内容

vue可以不定义路由吗

秋天2023年03月07日 04:00:13wifi设置知识258

今天给各位分享vue可以不定义路由吗的知识,其中也会对vue定义动态路由进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站

本文内容目录一览:

Vue可以不用webpack做路由功能吗

1、安装node,vue运行需要基于npm一定的版本,所以首先升级npm到最新的版本,而在安装的过程中个人比较喜欢淘宝的镜像,所以先安装cnpm(因为速度和稳定性都比较好)

2、在目标文件夹下打开终端

3、执行cnpm install vue-cli -g 全局安装

运行vue查看安装是否成功

4、运行vue init webpack(注:模板名称) sell2(注:项目名称)

5、进入项目文件夹下执行 cnpm install 来安装下载到模板中的package.json中的依赖,安装完成后会在项目文件夹下自动生成node-module文件来存放安装的依赖文件

6、由于依赖项非常的多编辑器在检索module文件时会非常的耗内存,所以在用webstorm编辑器启动项目的时候我们往往会在node-module文件夹右键去阻止检索该文件

注:webstorm一打开就卡死了,没办法操作文件夹这种情况的解决方法为,首先在文件夹形式下打开删除node-modules文件夹,然后进行阻止检索的方法,然后在重新cnpm install就好*(这种方法需要安装完依赖项先运行一次然后删除node_modules子文件,webstorm打开项目,禁止检索node_ module文件夹,然后在删除该文件夹,重新安装即可)

7、运行项目执行 npm run dev (注:此时不能用cnpm来运行,必须是npm)

8、将需要的资源放进项目

9、我们需要用到路由功能 所以需要安装vue-router

安装方法:vnpm install vuve-router --save

10、在build/devs-erver.js下编写自定义变量和路由功能

这样在运行项目下就可以得到自己想要的json数据,

这样路由就配置成功,并且得到了自己想要的数据

11、在写代码之前现在html文件下引入初始化样式(保持样式的统一和美观)

12、调用组件的方式

Vue路由的使用

路由允许我们通过不同的URL去访问不同的内容,该URL可以是我们自己设置的,在项目中并没有这样的文件夹,这种功能就是路由

路由的本质是hash值

定:定义路由组件

配:配置路由

实:实例化路由

挂:挂载路由

路由(vue-router)的基本作用就是将每个路径映射到对应的组件,通过修改路由进行组件之间的转换

常规路径规则为在当前路径后面加上"/path",path即为设定的前端路由路径

  跳转到上一次的页面:this.$router.go(-1);

  指定跳转的地址:this.$router.replace("/path");

  指定跳转的路由名字下:this.$router.replace({name:"menuLink"});

  通过push进行跳转:this.$router.push("/path");

  或this.$router.push({name:"path"});

  (1)设置一个默认展示组件,(不推荐!!!)

        {path:"/",component:login}

    (2) 路由redirect重定向,设置默认组件

        {path:"/",redirect:"login"}

  (1)创建一个路由对象,当导入vue-router包之后,在window全局对象之中就有一个路由的构造函数VueRouter

  (2)在new路由对象的时候可以传递一个配置对象,这个配置对象的route表示路由器的匹配规则

  (3)每个路由规则都是一个对象,这个规则对象身上必须有两个属性

        属性1:path表示监听那个路由的链接地址

属性2:component表示如果路由是前面匹配到的path,则展示component属性对应的组件,

      component属性值必须是一个组件模板对象,不能是组件的引用名称

  (4)router:routerObj将路由规则对象,注册到VM实例上,用来监听URL地址的变化,然后展示对应的组件

  (5)使用vue官方提供的router-link元素使用它,默认渲染成一个a标签,router-link to="login"登录/router-link

  (6)在控制的div中(App.Vue)使用router-view/router-view

vue 路由规则问题

path:'/' 是根路由 默认路由

path:'*' 是当访问一个没有定义路由的时候,会自动使用这个路由。例如:用户访问不存在的页面,会自动跳转这个路由。相当于404页面

以上就是vue可以不定义路由吗的全部内容了,文章比较长感谢您的耐心阅读,希望能帮到您,

扫描二维码推送至手机访问。

版权声明:本文由路由设置网发布,如需转载请注明出处。

本文链接:https://www.shoulian.org/luyou/post/11743.html

分享给朋友:

“vue可以不定义路由吗” 的相关文章

家用宽带怎么换路由器

家用宽带怎么换路由器

当朋友们看到这个文章时想必是想要了解家用宽带怎么换路由器相关的知识,这里同时多从个角度为大家介绍家庭宽带如何换路由器相应的内容。 本文内容目录一览: 1、宽带换路由器怎么设置 2、怎么换路由器设置方法 3、家里的网络是宽带,有猫,怎么安装路由器? 4、我安的联通宽带,带的猫,我自己买了一...

除了普联的路由器有哪些

除了普联的路由器有哪些

有很多朋友不知道除了普联的路由器有哪些要如何操作,今天为大家整理了很多普联软件和普联路由器相关的答案,组成一篇内容丰富的文章,希望能到您 本文内容目录一览: 1、智能路由器除了极路由,还有其他什么品牌吗? 2、公认最好的路由器牌子 3、无线路由器除了TP-link还有什么类型? 4、求家...

路由器闪烁的灯有哪些灯

路由器闪烁的灯有哪些灯

有很多朋友不知道路由器闪烁的灯有哪些灯要如何操作,今天为大家整理了很多路由器的灯全部闪烁是什么情况相关的答案,组成一篇内容丰富的文章,希望能到您 本文内容目录一览:路由器闪烁的灯有哪些灯的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于路由器的灯全部闪烁是什么情况、路由器闪烁的灯有哪些灯的信息别...

光猫怎么分离路由器

光猫怎么分离路由器

当朋友们看到这个文章时想必是想要了解光猫怎么分离路由器相关的知识,这里同时多从个角度为大家介绍路由器和光猫分开相应的内容。 本文内容目录一览: 1、怎么把光猫变成路由器 2、怎么把路由器和网线分离? 3、猫和路由器一体机怎么分开装路由器 4、同一光猫如何拖2个路由器 怎么把光猫变成路由...

怎么设置路由器网速低

怎么设置路由器网速低

有很多朋友不知道怎么设置路由器网速低要如何操作,今天为大家整理了很多网速低怎样设置相关的答案,组成一篇内容丰富的文章,希望能到您 本文内容目录一览: 1、怎么设置路由器限速方法 2、如何设置让网速变慢 3、路由器怎么设置网速限制 怎么设置路由器限速方法 计算机(computer)俗称电脑...

宽带装在路由器怎么用

宽带装在路由器怎么用

本篇文章给大家谈谈宽带装在路由器怎么用,以及宽带装在路由器怎么用不了对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文内容目录一览: 1、刚装好宽带怎么连接路由器? 2、如何用路由器直接连接宽带? 3、怎么用宽带连接路由器? 刚装好宽带怎么连接路由器? 新装宽带连接路由器的正确方...