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

什么时候用vue路由

秋天2023年03月05日 02:48:09wifi设置知识436

今天和朋友们分享什么时候用vue路由相关的知识,相信大家通过本文介绍也能对vue 什么时候使用嵌套路由有自已的收获和理解。自己轻松搞问题。

本文内容目录一览:

为什么使用Vue动态路由

项目构建使用官方vue-cli,由于项目较小,使用simple模板。在2.0中路由不再使用router.start();而路由跳转得组件也有所变化,官方文档很全面。有一点不是很懂,就是关于路由的挂载,本来准备另外写个router.js来挂载路由,可是不太好使,所以全都放在了main.js中。在首页有页面切换但是并不涉及路由,这里使用了动态组件,并且使用缓存

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 何时适合用组件?何时适合用路由?

router:根据不同的地址跳转到不同的页面

一、vue-router的使用

1.下载路由模块 npm vue-router --save

2.在router.js中

先引入路由 import Router from 'vue-router'

接着通过use在vue全局注册使用 Vue.use(Router)

最后将路由表导出 export default new router({ })

3.在main.js中引入路由组件 import router from './router'

4.以参数的形式写到根目录中 在vue实例对象中声明router

5.最后在App.vue的模板中设置路由出口 router-view/router-view

二、添加组件步骤:

1.在src的components下添加组件 apple.vue

2.在app.vue的script标签

引入 新添的组件 import apple from './componets/apple'

在data后注册每个组件 components:{apple}

在template标签里用组件名写一个标签apple/apple

3.通过命令npm run dev 运行项目查看组件是否添加成功

三、将组件添加到路由表的步骤:

1.安装路由 npm install vue-router --save

2.将components里的组件引入配置到router.js中

先引入组件 import...

再配置路由路径

3.在main.js中使用router

先引入路由 import...

再在vue实例中指定router

4.在App.vue中模板中添加路由链接 router-link和出口router-view

vue 嵌套路由 在什么情况下会用到

比如你有好几个一级路由,其中一个是用户个人中心。个人中心里有个左侧边栏作为菜单,点击不同内容时,右侧对应内容改变。你希望个人中心中的每项操作都对应一个路由的话,就可以把右侧作为一个sub router-view,对应的也就是嵌套路由。

以上就是什么时候用vue路由的全部内容了,文章比较长感谢您的耐心阅读,希望能帮到您,

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

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

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

分享给朋友:

“什么时候用vue路由” 的相关文章

移动宽带怎么注册路由器

移动宽带怎么注册路由器

今天给各位分享移动宽带怎么注册路由器的知识,其中也会对移动宽带设备注册教程进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站 本文内容目录一览: 1、移动宽带,怎么设置路由器上网? 2、移动宽带怎么设置设置路由器 3、中国移动宽带如何连接路由器 4、移动宽带怎么安装无线路由器?...

华硕路由器怎么复位键

华硕路由器怎么复位键

今天和朋友们分享华硕路由器怎么复位键相关的知识,相信大家通过本文介绍也能对华硕路由重置按钮有自已的收获和理解。自己轻松搞问题。本文内容目录一览: 1、华硕路由器的复位键在哪里? 2、怎样将华硕路由器恢复出厂设定? 3、华硕路由器恢复出厂设置应该怎么操作 4、华硕路由器如何n66重置...

账号是怎么设置路由器

账号是怎么设置路由器

今天和朋友们分享账号是怎么设置路由器相关的知识,相信大家通过本文介绍也能对路由器怎样设置账号有自已的收获和理解。自己轻松搞问题。本文内容目录一览: 1、路由器宽带密码和账号怎么设置啊 2、要怎么设置路由器 3、路由器账号怎么设置 4、路由器设置账号和密码 5、路由器怎么登陆设置?...

电信猫路由器怎么用

电信猫路由器怎么用

今天给各位分享电信猫路由器怎么用的知识,其中也会对电信猫如何设置路由器进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站 本文内容目录一览: 1、电信光纤猫接无线路由器怎么设置? 2、电信猫如何设置路由器 3、无线路由器与电信光猫怎么连接,然后wifi那些怎么设置 电信光纤猫接无线路...

ros路由器怎么自动映射

ros路由器怎么自动映射

有很多朋友不知道ros路由器怎么自动映射要如何操作,今天为大家整理了很多ros无线路由器相关的答案,组成一篇内容丰富的文章,希望能到您 本文内容目录一览: 1、路由器设置映射方法 2、ros路由如何设置端口映射? 3、路由器怎么实现映射功能? 路由器设置映射方法 如果你想在自己电脑上放置...

有哪些路由器值得买便宜的

有哪些路由器值得买便宜的

本篇文章给大家谈谈有哪些路由器值得买便宜的,以及路由器买贵的好还是,便宜的好对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文内容目录一览: 1、别再花冤枉钱了!怎么选择路由器,读完就明白了,你选对了没有? 2、千元以内的路由器推荐哪款? 3、有哪些家用无线路由器值得推荐? 4...