您的当前位置:首页Vue.js的嵌套路由(子路由)
广告

Vue.js的嵌套路由(子路由)

2023-11-30 来源:六三科技网
这次给大家带来Vue.js的嵌套路由(子路由),使用Vue.js嵌套路由(子路由)的注意事项有哪些,下面就是实战案例,一起来看一下。

children嵌套路由,子路由插入到了父组件apple中

let router = new VRouter({ // 如果mode设为history, 那么地址就可以不使用哈希(# 哈希)了,就可以直接访问. http://localhost:8080/#/apple ==>> http://localhost:8080/apple mode: 'history', routes: [ // 做一个映射表 { path: '/apple', component: Apple, // 嵌套路由,子路由插入到了父组件apple中 children: [ { path: 'red', component: RedApple } ] }, { path: '/banana', component: Banana } ]})

在父路由apple组件中,将RedApple组件插入进来

<template> <div class="hello"> ....... <router-view></router-view> </div></template>

1.gif

to red apple<router-link :to="{path:'apple/red'}">to red apple</router-link>

相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

推荐阅读:

Vue.js的vue标签属性和条件渲染

使用Vue.js有哪些注意事项

小编还为您整理了以下内容,可能对您也有帮助:

讲解vue-router之什么是嵌套路由

上一次给大家简单说了下什么是动态路由现在我们来讲讲嵌套路由。

GitHub:https://github.com/Ewall1106/mall

1.嵌套路由的使用场景是什么呢?

大家都知道选项卡,在选项卡中,顶部有数个导航栏,中间的主体显示的是内容;这个时候,整个页面是一个路由,然后点击选项卡切换不同的路由来展示不同的内容,这个时候就是路由中嵌套路由。

2.具体是怎么实现的?

① 为了演示,我们现在view文件夹下新建一个title1.vue和title2.vue用来存放不同的内容

title1.vue

title2.vue

② 现在我们在router 》 index.js 中将这上面两个新建的组件引入进来并填写路径,这里的Title1和Title2是作为test.vue页面的子路由,所以要写在children属性下

路由配置

这里需要提个醒的就是填写children子路由的path不要加/

③ 然后我们再去到test.vue中敲:

在这里提个醒,在to后面写路由路径的时候,一定到带上绝对路径,也就是要把test这个父路由路径写进去"/test/title1"

test.vue

④ 最后我们进入浏览器点击不同的标题就可以看到不同内容的展示

localhost

点击标题

参考学习

https://router.vuejs.org/zh-cn/

Vue怎么做实现路由跳转和嵌套

在实际项目中我们会碰到多层嵌套的组件组合而成,但是我们如何实现嵌套路由呢?因此我们需要在 VueRouter 的参数中使用 children 配置,这样就可以很好的实现路由嵌套。 indexhtml,只有一个路由出口 [html] view plain copy mainjs,路由的重Vue怎么做实现路由跳转和嵌套

Vue怎么做实现路由跳转和嵌套

在实际项目中我们会碰到多层嵌套的组件组合而成,但是我们如何实现嵌套路由呢?因此我们需要在 VueRouter 的参数中使用 children 配置,这样就可以很好的实现路由嵌套。 indexhtml,只有一个路由出口 [html] view plain copy mainjs,路由的重Vue怎么做实现路由跳转和嵌套

vue2.0如何嵌套路由?子路由怎么配置

方法/步骤

我们先来解决上一次的tab路由切换效果激动class的问题!我们不想让它点击其它路由链接的时候第一个的路由class处于激活状态.首先我们修改下min.js里面的路由配置文件.加上首页路由组件配置.红色圈的地方意思是,默认进来显示的路由路径,还有一个就是直接配置默认的路由路径,其实指向的都是同一个组件.

第二步,将导航的路由改动下.这里要注意的是,第一个router-link to不在是直接指向"/"了,而是"/home".然后我们在第一个路由内容的DIV上加一个动态class.用来判断当前的路由路径.写一个三元表达式.$route是一个路由对象,所有的路由都被存在这个对象当中.我们只需要进行判断当前路由是否指向home这个组件.如果是的话加上一个router-link-active如果不是的话就为空class.效果见第二张,第三张图片.

此时一个完整的路由切换效果就完成了.接下来就分享下嵌套路由是怎么弄的!首先找到min.js路由 配置文件.比如我们在home组件里加一个嵌套路由chi组件.首先要先创建这个chi组件,然后引入到min.js文件中.然后在home路由的里面加上children这个方法.这样,一个嵌套的子路由就配置好了.

到这里,在home组件中写一个入口进入这个嵌套的路由组件中去.嵌套路由点击进去,会进入到之前写好的chi.vue组件中去.

点击之后,就会显示.home里面的chi组件.并且显示chi组件中的内容

6.最后总结下这个的用法地方在哪里.吧比如一个首页中是路由进来的组件,而这个组件中又有一些类似切换tab功能.

自己写一个Vue子路由

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

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

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

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

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

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

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

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

自己写一个Vue子路由

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

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

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

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

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

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

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

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

vue.js路由是什么

路由是指路由器从一个接口上收到数据包,根据数据包的目的地址进行定向并转发到另一个接口的过程。

Vue.js路由允许我们通过不同的URL访问不同的内容。

通过Vue.js可以实现多视图的单页Web应用(single page web application,SPA)。

Vue.js路由需要载入vue-router 库

但是使用路由时,url也是随着改变的,用户浏览到一个网页时可以直接复制或收藏当前页的url给别人,这种方式对于搜索引擎和用户来说都是友好的。

简单实例

Vue.js + vue-router 可以很简单的实现单页应用。

<router-link> 是一个组件,该组件用于设置一个导航链接,切换不同 HTML 内容。 to 属性为目标地址, 即要显示的内容。

以下实例中我们将 vue-router 加进来,然后配置组件和路由映射,再告诉 vue-router 在哪里渲染它们。代码如下所示:

HTML代码

<script src="https://unpkg.com/vue/dist/vue.js"></script><script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">

<h1>Hello App!</h1>

<p>

<!-- 使用 router-link 组件来导航. -->

<!-- 通过传入 `to` 属性指定链接. -->

<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->

<router-link to="/foo">Go to Foo</router-link>

<router-link to="/bar">Go to Bar</router-link>

</p>

<!-- 路由出口 -->

<!-- 路由匹配到的组件将渲染在这里 -->

<router-view></router-view></div>JavaScript代码

// 0. 如果使用模块化机制编程,导入 Vue 和 VueRouter,要调用 Vue.use(VueRouter)

// 1. 定义(路由)组件。

// 可以从其他文件 import 进来

const Foo = { template: '<div>foo</div>' }

const Bar = { template: '<div>bar</div>' }

// 2. 定义路由

// 每个路由应该映射一个组件。 其中"component" 可以是

// 通过 Vue.extend() 创建的组件构造器,

// 或者,只是一个组件配置对象。

// 我们晚点再讨论嵌套路由。

const routes = [

{ path: '/foo', component: Foo },

{ path: '/bar', component: Bar }

]

// 3. 创建 router 实例,然后传 `routes` 配置

// 你还可以传别的配置参数, 不过先这么简单着吧。

const router = new VueRouter({

routes // (缩写)相当于 routes: routes

})

// 4. 创建和挂载根实例。

// 记得要通过 router 配置参数注入路由,

// 从而让整个应用都有路由功能

const app = new Vue({

router

}).$mount('#app')

// 现在,应用已经启动了!点击过的导航链接都会加上样式 class ="router-link-exact-active router-link-active"。

vue二级路由怎么把一级路由的的结构保留

使用嵌套路由,使用动态路由参数。

1、使用嵌套路由:将一级路由作为父路由,将二级路由配置在其中,可以保留一级路由的结构和页面布局。

2、使用动态路由参数:通过使用动态路由参数,将一级路由作为固定路径,再根据不同的参数值加载对应的组件,保留一级路由的结构和页面样式。

六三科技网还为您提供以下相关内容希望对您有帮助:

vue子路由是什么意思

Vue.js是一个开源的JavaScript框架,我么可以利用它来构建前端单页应用程序(SPA)。在Vue.js中,我们可以使用路由进行页面之间的导航。子路由也是一种常见的路由技术,它允许在一个主路由中包含多个其他路由,使我们能够渲染嵌...

讲解vue-router之什么是嵌套路由

所以要写在children属性下路由配置这里需要提个醒的就是填写children子路由的path不要加/③ 然后我们再去到test.vue中敲:在这里提个醒,在to后面写路由路径的时候,一定到带上绝对路径,也就是要把test这个父路由路径写进...

Vue怎么做实现路由跳转和嵌套

main.js,路由的重定向,就会在页面一加载的时候,就会将home组件显示出来,因为重定向指向了home组件,redirect的指向与path的必须一致。children里面是子路由,当然子路由里面还可以继续嵌套子路由。[html] view plain copy im...

vue2.0如何嵌套路由?子路由怎么配置

首先找到min.js路由 配置文件.比如我们在home组件里加一个嵌套路由chi组件.首先要先创建这个chi组件,然后引入到min.js文件中.然后在home路由的里面加上children这个方法.这样,一个嵌套的子路由就配置好了.到这里,在home组件中...

自己写一个Vue子路由

1、首先做两个导航,分别是banana下边的1号和2号。在App.vue里做 2、在components目录下创建两个文件,分别是b1.vue和b2.vue,两个文件的内容相似即可 3、在老父亲banana.vue中添加一行。router-view是为了给子模板提供...

vue为什么定义父子路由

路由的嵌套。vue路由的嵌套是子路由可以嵌套在父级路由下,形成层级结构,被称为父子路由,这种嵌套关系可以更好地组织和管理页面,使得页面之间的关系更加清晰。

vue二级路由怎么把一级路由的的结构保留

1、使用嵌套路由:将一级路由作为父路由,将二级路由配置在其中,可以保留一级路由的结构和页面布局。2、使用动态路由参数:通过使用动态路由参数,将一级路由作为固定路径,再根据不同的参数值加载对应的组件,保留一级路由的...

Vue 的路由切换时要注意哪些问题?

在 Vue 中,路由切换时需要注意以下几个问题:1. 子路由中的 name 属性和父路由中的 name 属性不可以同时出现。2. 使用 children 属性实现子路由时,子路由 path 前面不能带 /,以 / 开头的嵌套路径会被当作根路径,...

vue.js路由是什么

路由是指路由器从一个接口上收到数据包,根据数据包的目的地址进行定向并转发到另一个接口的过程。Vue.js路由允许我们通过不同的URL访问不同的内容。通过Vue.js可以实现多视图的单页Web应用(single page web application,...

Vue路由进阶

query传参 路径将会解析成: /login?id=123 ,类似Get请求。使用 children 给路径添加子路径。形成嵌套路由,父路由可以只渲染一个 router-view ,但必须有一个 router-view ,子路由将渲染在父路由的 router-view 里。...

Top