自己写一个Vue子路由

作者: 9979eb0cd854 | 来源:发表于2018-08-13 16:23 被阅读463次

一:路由:在URL中采用#号来作为当前视图的地址,改变#号后的参数,页面并不会重载。

二:路由:是(SPA)单页应用的路径管理器,单页应用相当于只有一个index.html页面,改变路径可切换至不同的页面

子路由:

比如有一个地址,圈出的地方在banana目录下,可以是b1,也可以是b2,那么b1,b2就叫做banana的子路由


image.png

创建子路由的步骤:

1、首先做两个导航,分别是banana下边的1号和2号。在App.vue里做


image.png

2、在components目录下创建两个文件,分别是b1.vue和b2.vue,两个文件的内容相似即可


image.png

3、在老父亲banana.vue中添加一行。router-view是为了给子模板提供插入位置。b1,b2是banana的子页面,就像继承一样


image.png

4、在Router文件夹的index.js中添加路由规则


image.png

children字段后边跟的是个数组,数组里和其他配置路由基本相同,需要配置path和component。


image.png

相关文章

  • reactJs+react Router多级导航切换路由(页面)

    上次写了vue+Vue Router多级导航切换路由(页面),发现还有人看,这次就写一个reactJs版的切换路由...

  • Vue路由配置

    Vue路由使根组件可以自由的挂载需要的子组件。 路由配置: 一、安装 npm install vue-router...

  • vue-router中,父级路由不能有name属性

    vue项目中,使用了vue-router,我的场景是在一个路由中嵌套了子级路由,然后我在运行项目的时候,给出了警告...

  • element商品分类

    B.创建子级路由 创建categories子级路由组件并设置路由规则 C.添加组件基本布局 在Cate.vue组件...

  • 自己写一个Vue子路由

    一:路由:在URL中采用#号来作为当前视图的地址,改变#号后的参数,页面并不会重载。 二:路由:是(SPA)单页应...

  • Vue应用

    Vue项目 Vue结构 Vue项目打包与发布 Vue语法二 Vue网络请求 Vue路由 动态路由 编程式路由导航

  • 动态路由和按钮权限

    静态路由 路由代码写死,所有路由不会根据角色进行改变 router->index.vue 用到路由的地方直接遍历 ...

  • vue-cli的路由警告问题

    问题一: 在Vue的项目中使用了Vue-Router,当某个路由有子级路由时,如下写法: 如果写法是如上的写法,就...

  • vue中使用监听器(watch)需要注意的问题

    今天在自己写的vue项目中,由于路由跳转需要更改vuex状态中的title,因此监听了路由的path,下面是代码:...

  • vue路由vue-router快速入手

    路由是vue进行“页面跳转”的实现方式,而vue-router是vue的一个路由组件。https://router...

网友评论

  • yemoumou:俱怀逸兴壮思飞,欲上青天览明月。-简书朋友你好,我是币圈一老友,我的写作方向是区块链和数字货币,初到简书,望多多关照。互粉互赞,已赞,期待您的回赞哦。-ڤ耤誥ƅ偂

本文标题:自己写一个Vue子路由

本文链接:https://www.haomeiwen.com/subject/crgybftx.html