<div id="app">
<div>
<router-link to="/">首页</router-link>
<router-link to="/user">用户管理</router-link>
<router-link to="/post">帖子管理</router-link>
</div>
<div>
<router-view name="sidebar"></router-view>
<router-view name="content"></router-view>
</div>
</div>
var routes = [
{
path: '/',
component: {
template: `
<div>首页</div>
`
}
},{
path: '/user',
components: {
sidebar: {
template: `
<ul>
<li>用户列表</li>
<li>权限管理</li>
</ul>
`
},
content: {
template: `
<p>
核心技术是国之重器!建设网络强国习主席提出新要求
</p>
`
}
}
},{
path: '/post',
components: {
sidebar: {
template: `
<ul>
<li>帖子列表</li>
<li>标签管理</li>
</ul>
`
},
content: {
template: `
<p>
核心技术是国之重器!建设网络强国习主席提出新要求
</p>
`
}
}
}
]; var router = new VueRouter({
routes: routes
}); var app = new Vue({
el: '#app',
router: router
})

vue路由5:命名视图的更多相关文章

  1. Vue学习笔记【29】——Vue路由(命名视图实现经典布局)

    命名视图实现经典布局 标签代码结构:  <div id="app">    <router-view></router-view>    < ...

  2. [Vue 牛刀小试]:第十三章 - Vue Router 基础使用再探(命名路由、命名视图、路由传参)

    一.前言 在上一章的学习中,我们简单介绍了前端路由的概念,以及如何在 Vue 中通过使用 Vue Router 来实现我们的前端路由.但是在实际使用中,我们经常会遇到路由传参.或者一个页面是由多个组件 ...

  3. VueJs(11)---vue-router(命名路由,命名视图,重定向别名,路由组件传参)

    vue-router 上篇文章讲了第一篇vue-router相关文章,文章地址:VueJs(10)---vue-router(进阶1) 一.命名路由 有时候,通过一个名称来标识一个路由显得更方便一些, ...

  4. vue-router4 |name的作用|query传参|parmas传参|动态路由参数|命名视图|别名alias|前置路由守卫|路由过渡效果|滚动行为

    vue-router4 出现 No match found for location with path "/" #### router/index.ts文件 import { c ...

  5. vue路由实现多视图的单页应用

    多视图的单页应用:在一个页面中实现多个页面不同切换,url也发生相应变化. router-view结合this.$router.push("/pickUp")实现,效果如下: 当点 ...

  6. vue 路由更新页面视图未更新问题

    最近项目做面包屑的时候遇到一个问题就是路由变化的时候页面视图并没有发生变化,后来上网查,发现是vue-router的特性导致的. vue-router的切换不同于传统的页面的切换.路由之间的切换,其实 ...

  7. Vue系列之 => 命名视图实现经典布局

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  8. 14.vue路由&脚手架

    一.vue路由:https://router.vuejs.org/zh/ 1.定义 let router = new VueRouter({ mode:"history/hash" ...

  9. Vue路由-命名视图实现经典布局

    Vue路由-命名视图实现经典布局 相关Html: <!DOCTYPE html> <html lang="en"> <head> <met ...

  10. VUE router-view 页面布局 (嵌套路由+命名视图)

    嵌套路由 实际生活中的应用界面,通常由多层嵌套的组件组合而成.同样地,URL 中各段动态路径也按某种结构对应嵌套的各层组件,例如: /user/foo/profile /user/foo/posts ...

随机推荐

  1. windows无法安装到这个磁盘。选中的磁盘采用GPT分区形式 Windows 检测到 EFI 系统分区格式化为 NTFS。将 EFI 系统分区个数化为 FAT32,然后重新启动安装

    win10安装问题解决 问题 1.windows无法安装到这个磁盘.选中的磁盘采用GPT分区形式 解决方法: 1.bios,更改 uefi/legacy boot 为ueei only 后面可以安装了 ...

  2. Http服务基础原理

    http服务相关解释 http :  Hyper Text Transfer Protocol,  80/tcp 超文本传输协议,基于tcp传输协议的80端口传输 html: Hyper Text M ...

  3. Object类(API文档)

    java.lang Class Object java.lang.Object public class Object Class Object is the root of the class hi ...

  4. nginx配置url重写

    url重写是指通过配置conf文件,以让网站的url中达到某种状态时则定向/跳转到某个规则,比如常见的伪静态.301重定向.浏览器定向等 rewrite 语法 在配置文件的server块中写,如: s ...

  5. Git的安装和配置用户名和密码

    在Windows中进行安装.访问https://git-scm.com/,点击Downloads for Windows,我下载的是Git-2.16.2-64-bit.exe.都按照默认选项即可,其中 ...

  6. Mysql表中唯一编号的分配机制

    最近遇到一个问题:高并发环境下,如何避免MYSQL一张表里的某些列不要重复. 同其他博友一样 https://blog.csdn.net/jacketinsysu/article/details/51 ...

  7. 实习培训——Java异常处理(8)

    实习培训——Java异常处理(8) Java 异常处理 异常是程序中的一些错误,但并不是所有的错误都是异常,并且错误有时候是可以避免的. 比如说,你的代码少了一个分号,那么运行出来结果是提示是错误 j ...

  8. docker容器多服务(不推荐)

    1.最常用方式配置进程管理工具Supervisor 2.最简单的就是把多个启动命令放到一个启动脚本里面,启动的时候直接启动这个脚本 第一种方式: 1.构建基础镜像 FROM lmurawsk/pyth ...

  9. DL中train\dev\test集

    转自:https://blog.csdn.net/l8947943/article/details/80328721 training set:训练集是用来训练模型的.遵循训练集大,开发,测试集小的特 ...

  10. SVM、LR、决策树的对比

    一.LR LR,DT,SVM都有自身的特性,首先来看一下LR,工业界最受青睐的机器学习算法,训练.预测的高效性能以及算法容易实现使其能轻松适应工业界的需求.LR还有个非常方便实用的额外功能就是它并不会 ...