062——VUE中vue-router之命名视图的实例

最新推荐文章于 2022-01-01 19:29:25 发布
最新推荐文章于 2022-01-01 19:29:25 发布
阅读量105 收藏
点赞数
文章标签： javascript ViewUI 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-router之命名视图的实例</title>
    <script src="vue.js"></script>
    <script src="node_modules/vue-router/dist/vue-router.js"></script>
</head>
<body>
<style>
    .news {
        width: 200px;
        float: left;
        border: 1px #188eee solid;
    }

    .slide {
        width: 200px;
        float: left;
        border: 1px #000 solid;
    }
</style>
<div id="demo">
    <router-view></router-view>
    <router-view class="news" name="news"></router-view>
    <router-view class="slide" name="slide"></router-view>
</div>
<script type="text/x-template" id="menu">
    <div>
        <a href="http://www.baidu.com">百度一下</a>
        <a href="http://www.baidu.com">知天下</a>
    </div>
</script>
<script type="text/x-template" id="news">
    <div>
        <li v-for="v in newss">{{v.title}}</li>
    </div>
</script>
<script type="text/x-template" id="slide">
    <div>
        <li v-for="v in datas">{{v.title}}</li>
    </div>
</script>
<script type="text/javascript">
    const menu = {
        template: "#menu"
    }
    const news = {
        template: "#news",
        data() {
            return {
                newss: [
                    {title: '测试一'},
                    {title: '测试二'},
                ]
            }
        }
    }
    const slide = {
        template: "#slide",
        data() {
            return {
                datas: [
                    {title: '测试三'},
                    {title: '测试四'},
                ]
            }
        }
    }
    var routes = [
        {
            path: '/', components: {
            default: menu,
            news: news,
            slide: slide
        }
        }
    ]
    var router = new VueRouter({routes});
    new Vue({
        el: "#demo",
        router

    });
</script>
</body>
</html>

　　

weixin_33739541
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue-router 命名视图
qq_27009517的博客
09-26 399
嵌套命名视图 我们也有可能使用命名视图创建嵌套视图的复杂布局。这时你也需要命名用到的嵌套router-view组件。我们以一个设置面板为例： /settings/emails /settings/profile +-----------------------------------+ +------------------------------+ | UserSettings ..
vue-router命名路由-命名视图-重定向-别名
AyayaOVO的博客
07-03 527
1、命名路由 给一个路由命一个唯一的名称，然后跳转调用这个名称即可。 （1）在src/router/index.js中加一个带name的路由，代码如下： { path: 'one', // 子页面1 name: 'one', // 路由名称-命名路由 component: One // 页面组件 } （2）在src/component/Home.vue页面中调用，代码如下： // template跳转调用 <router-link :to="{name: 'one'}"&gt
vue 中 命名视图的用法实例详解
12-08
今天主要记录  vue中命名视图的用法 先奉上官网网址：https://router.vuejs.org/zh/guide/essentials/named-views.html 一般情况下，一个页面里面可能有多个组件，比如侧边栏，内容区，侧边栏是一个组件、内容区是一个组件，我们普遍会将两个组件作为子组件添加到主页面中，因为页面中只有一个 router-view视图，那么问题来了，怎么让一个页面中有多个视图呢，拥有多个视图，很随意，多写几个router-view标签就行了，但是每个router-view视图里面显示的相同的内容，这是一个问题，多写几个视图好像没什么用，那么怎么让一个页面中的多个
vue-router 命名视图案例
千里之行，始于足下！
10-29 606
有的时候想在页面中同时展示多个视图，而不是切换形式的嵌套展示，这个时候拥有多个出口的router-view就能很方便的实现; 现在有这么一个场景：有一个一个页面由左侧侧边栏tab页组成，右边是对应tab所显示的内容，其中一个tab的内容由2个组件构成，那么使用命名视图该如何实现？ 下面就是实现的过程： 1、创建good-children.vue文件 <template> &lt...
Vue-Router命名视图小demo
小白小白从不日别的博客
10-12 279
1.什么是命名视图? 命名视图和前面讲解的具名插槽很像, 都是让不同的出口显示不同的内容 命名视图就是当路由地址被匹配的时候同时指定多个出口, 并且每个出口中显示的内容不同 有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar (侧导航) 和 main (主内容) 两个视图，这个时候命名视图就派上用场了 你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default
vue-router命名视图
zhlinh90的博客
06-12 712
界面中拥有多个单独命名的视图，如果 router-view 没有设置名字，那么默认为default.&lt;router-view class="view one"&gt;&lt;/router-view&gt; &lt;router-view class="view two" name="a"&gt;&lt;/router-view&gt; &lt;router-view c
Vue中通过vue-router实现命名视图的问题
10-15
var router = new VueRouter({ routes: [ { path: "/", components: { default: header, left: leftBox, main: mainBox } } ] }); ``` 接下来，在Vue实例的模板中，我们可以使用多个`<router-view>`标签...
VueJs路由跳转——vue-router的使用详解
10-20
在JavaScript中，需要创建一个VueRouter实例并传入配置参数： ```javascript var router = new VueRouter({ routes: [ { path: '/view-a', component: ViewA }, { path: '/view-b', component: ViewB } ] }); ...
vue-router3.0版本中 router.push 不能刷新页面的问题
11-30
出现这种情况的一个可能原因是，新的`router`实例并不与Vue实例中的`this.$router`共享相同的上下文，因此它的`push`操作可能不会触发视图的更新。在Vue-Router早期版本中，可能存在某种单例模式，使得不同实例间的`...
详解vue 命名视图
10-16
主要介绍了vue 命名视图的相关知识，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
Vue3中vue-router的使用学习代码
最新发布
11-19
Vue3中的Vue Router是前端路由管理的重要库，用于在单页面应用（SPA）中实现页面间的导航和状态管理。在本项目中，我们将探讨如何在Vue3环境中集成和使用Vue Router，以及它的一些核心概念和功能。 首先，我们看到...
vue 命名视图
biliming的专栏
09-25 1072
用 vue-cli 生成脚手架， 想试试 命名视图，修改 App.vue  name="nav"> name="content"> 结果配置半天，页面刷不出来，最后发现，是 router/index.js 配置路由的时候，component 少了个 s, export default new
vue 实例之路由，动态路由，嵌套路由，命名路由，命名视图
余憨憨的学习日记
11-25 1785
认识路由 路由的本质是一种 对应关系 ，程序开发分为前端路由和后端路由。url 地址和真实的资源之间就有一种对应的关系，就是路由 。 什么是前端路由 前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做。对于单页的应用（SPA）来说，主要通过 URL 中的 hash (#号)来实现不同页面之间的切换。hash 有一个特点，就是 HTTP 请求中不会包含 hash 线管的内容，所以单页面程序中的页面跳转主要用 hash 来实现。前端路由是依靠 hash 值（锚点链接）的变化来实现页面内容的切换，也就是
使用命名视图实现经典布局
ranyizhang的博客
07-13 311
在创建路由时使用components添加多个组件，并给视图命名，使用时在router-view后加上name属性即可去组件中进行匹配，在name中是个字符串，只有在前加：的时候才是变量 例子 html代码 js代码 //创建路由 var router=new VueRouter({ routes:[ {path:"/", compone...
命名视图实现经典布局
保持饥渴、好奇
08-14 700
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
【Vue Router】006-命名视图
訾博（ZiBo）的博客
01-01 1593
1.6 命名视图 1.6.1 概述 有时候需要同时（同级）显示多个视图，而不是嵌套显示。比如创建一个布局，有 header 头部、sidebar 侧边栏、main 主内容等，这个时候就可以使用命名视图，可以同时在一个页面上定义多个命名视图！ 1.6.2 基本写法 命名路由 <router-view name="header"></router-view> <router-view name="sidebar"></router-view> <!--没有定
vue-router 的命名视图的使用
大脸猫~
07-25 6300
在开发中我们经常会遇到这种情况，就是有个项目的header是公用的，在各个页面中都会使用到，所以我们会将其设置为一个公共组件，然后在各个页面中引用，但是每个页面都去引用真是太麻烦了，所以在Vue中注册引用，这样就会在所有的页面中都有header了 例子： &lt;template lang="html"&gt; &lt;div id="app"&gt; &lt;app-head...
vue命名视图实现经典布局
weixin_30725467的博客
04-24 298
vue命名视图实现经典布局 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1...
Vue进阶：vue-router安装与基本使用指南
"Vue学习笔记进阶篇之vue-router安装及使用方法，介绍vue-router作为Vue.js官方的路由插件，用于构建...在实际项目中，还可以利用vue-router的其他特性，如路由参数、命名视图、懒加载等，进一步优化应用的结构和性能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值