vue-router命名视图的使用讲解

2024-11-28 22:15:35

有时候想同时（同级）展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar（侧导航）和 main（主内容）两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default。

如果按照他解释的这么简单的话，完全可以在根组件app.vue里直接引入sidebar组件，注册，渲染。没必要多此一举。既然可以在route.config.js里面灵活配置，那就可以灵活的用。官网的例子：

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>
const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: { default: Foo, a: Bar, b: Baz }
    }
  ]
})

在app.vue里面可以多注册几个命名视图，就可以

<template>
  <div id="app">
    <router-view></router-view>
    <router-view name="nav"></router-view>
    <router-view name="side"></router-view>
  </div>
</template>

{
  path: '/home',
  name: 'Home',
  components: {
    default: Home,
    nav: Nav,//不给的话就不渲染
    side: Side
  },
  children: [
    { path: '/', component: Home },//不给的话就匹配不到子组件，就不渲染
    { path: 'post', component: Post }
  ]
}

一、简单的命名视图（就是点击不同的路由跳转后来实现显示多个组件内容）

效果：

二、嵌套路由视图（同时满足嵌套路由的规则，还要满足视图的规则）

若有不足请多多指教！希望给您带来帮助！

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对我们的支持。如果你想了解更多相关内容请查看下面相关链接

详解vue-router导航守卫

当做Vue-cli项目的时候需要在路由跳转前做一些验证,比如登录验证,是网站中的普遍需求. 对此,vue-router 提供的 beforeEach可以方便地实现全局导航守卫(navigation-guards).组件内部的导航守卫函数使用相同,只是函数名称不同(beforeRouteEnter .beforeRouteUpdate(2.2 新增) .beforeRouteLeave). 钩子(Hook),早期编程可能有个概念叫句柄,不知道将两者类比而且强行归为一类是不是合适.钩子的用处是在某个
vue-router命名路由和编程式路由传参讲解

有时候,通过一个名称来标识一个路由显得更方便一些,特别是在链接一个路由,或者是执行一些跳转的时候.你可以在创建 Router 实例的时候,在 routes 配置中给某个路由设置名称. 重点代码: 效果: 若有不足请多多指教!希望给您带来帮助! 总结以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对我们的支持.如果你想了解更多相关内容请查看下面相关链接
vue-router实现嵌套路由的讲解

一.嵌套路由(配置好父路由component后,在父路由下面添加children属性来配置这个父路由的子路由) 需要注意的是:父组件中的<router-view></router-view>是子组件的占位符是必不可少的嵌套路由的现象:点击了路由跳转之后父路由组件的内容一直呈现:子路由的内容进行切换,地址栏的路径也随之改变. // 嵌套路由 { path: '/nest', component: () => import('@/nest/nest'), // 嵌套路由的关键字
Vue核心概念Getter的使用方法

有时候我们需要从store中的state中派生出一些状态. 如果有多个组件需要用到此属性,我们要么复制这个函数,或者抽取到一个共享函数然后在多处导入它--无论哪种方式都不是很理想. Vuex 允许我们在store中定义getter属性(可以认为是 store 的计算属性).就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算. 比如这里我们在Page4.vue里面需要对商品价格加倍,我们就可以使用Getter. 使用Getter store
为什么要使用Vuex的介绍

单向数据流以下是一个表示"单向数据流"理念的极简示意: 但是,当我们的应用遇到多个组件共享状态时,单向数据流的简洁性很容易被破坏: - 多个视图依赖于同一状态. - 来自不同视图的行为需要变更同一状态. 对于问题一,传参的方法对于多层嵌套的组件将会非常繁琐,并且对于兄弟组件间的状态传递无能为力. 对于问题二,我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝.以上的这些模式非常脆弱,通常会导致无法维护的代码. 因此,我们为什么不把组件的共享状态抽取出来,以一个全局单
Vuex中的State使用介绍

现在在上一篇为什么要使用Vuex的介绍理解基础上使用Vuex中的State,一个正面例子来证实,同时也介绍一下Vue核心概念State. Vuex 使用单一状态树--是的,用一个对象就包含了全部的应用层级状态.至此它便作为一个"唯一数据源 (SSOT)"而存在.这也意味着,每个应用将仅仅包含一个 store 实例.单一状态树让我们能够直接地定位任一特定的状态片段,在调试的过程中也能轻易地取得整个当前应用状态的快照. 单状态树和模块化并不冲突--在后面的章节里我们会讨论如何将状态和状态变
vue-router重定向和路由别名的使用讲解

一.重定向(你访问这个路径,但他跳到另一个路径,地址栏中显示目标路由的那个路径) "重定向"的意思是,当用户访问 /a时,URL 将会被替换成 /b,然后匹配路由为 /b 二.路由别名(就是给这个路由起了个名字,访问这个路由的时候不需要访问path 而是访问alias后面的) /a 的别名是 /b,意味着,当用户访问 /b 时,URL 会保持为 /b,但是路由匹配则为 /a,就像用户访问 /a 一样. 上面对应的路由配置为: const router = new VueRouter({
Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation. Vuex 中的 mutation 非常类似于事件: 每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler).这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数.mutation 必须是同步函数. 不带载荷(只改变数据的状态) 接前面几篇文章的例子,这里我们修改商品价格减半. store.js mutations: { //商品价格减半:
vue-router实现编程式导航的代码实例

除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现.即:通过js动态的进行导航链接. 一.this.$router.push( ) router.push(location, onComplete?, onAbort?) 注意:在 Vue 实例内部,你可以通过 $router 访问路由实例.因此你可以调用 this.$router.push. 想要导航到不同的 URL,则使用 router.push 方法.这个方法会
Vue实现的父组件向子组件传值功能示例

本文实例讲述了Vue实现的父组件向子组件传值功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 父组件向子组件传值</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></scrip

vue-router命名视图的使用讲解

相关推荐

随机推荐