vue路由5:命名视图
<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:命名视图的更多相关文章
- Vue学习笔记【29】——Vue路由(命名视图实现经典布局)
命名视图实现经典布局 标签代码结构: <div id="app"> <router-view></router-view> < ...
- [Vue 牛刀小试]:第十三章 - Vue Router 基础使用再探(命名路由、命名视图、路由传参)
一.前言 在上一章的学习中,我们简单介绍了前端路由的概念,以及如何在 Vue 中通过使用 Vue Router 来实现我们的前端路由.但是在实际使用中,我们经常会遇到路由传参.或者一个页面是由多个组件 ...
- VueJs(11)---vue-router(命名路由,命名视图,重定向别名,路由组件传参)
vue-router 上篇文章讲了第一篇vue-router相关文章,文章地址:VueJs(10)---vue-router(进阶1) 一.命名路由 有时候,通过一个名称来标识一个路由显得更方便一些, ...
- vue-router4 |name的作用|query传参|parmas传参|动态路由参数|命名视图|别名alias|前置路由守卫|路由过渡效果|滚动行为
vue-router4 出现 No match found for location with path "/" #### router/index.ts文件 import { c ...
- vue路由实现多视图的单页应用
多视图的单页应用:在一个页面中实现多个页面不同切换,url也发生相应变化. router-view结合this.$router.push("/pickUp")实现,效果如下: 当点 ...
- vue 路由更新页面视图未更新问题
最近项目做面包屑的时候遇到一个问题就是路由变化的时候页面视图并没有发生变化,后来上网查,发现是vue-router的特性导致的. vue-router的切换不同于传统的页面的切换.路由之间的切换,其实 ...
- Vue系列之 => 命名视图实现经典布局
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- 14.vue路由&脚手架
一.vue路由:https://router.vuejs.org/zh/ 1.定义 let router = new VueRouter({ mode:"history/hash" ...
- Vue路由-命名视图实现经典布局
Vue路由-命名视图实现经典布局 相关Html: <!DOCTYPE html> <html lang="en"> <head> <met ...
- VUE router-view 页面布局 (嵌套路由+命名视图)
嵌套路由 实际生活中的应用界面,通常由多层嵌套的组件组合而成.同样地,URL 中各段动态路径也按某种结构对应嵌套的各层组件,例如: /user/foo/profile /user/foo/posts ...
随机推荐
- mysql 权限管理 目录
mysql 权限管理介绍 mysql 权限管理 记录 mysql 权限管理 grant 命令 mysql 权限管理 revoke 回收权限 命令 mysql 权限管理 针对库 授权 db.* mysq ...
- 如何调用finecms指定栏目的描述关键词
有时我们在用finecms建站时需要调用指定栏目的描述和关键词,实现个性化需求,比如id为23的栏目很重要,要让它在首页展示出来,这时我们要如何调用呢?{dr_cat_value(23, 'name' ...
- 张小龙2018PRO版微信公开课演讲全文 透露2018微信全新计划
大家好!我是张小龙.欢迎大家来到微信公开课. 刚刚出现的是我打游戏的画面,被大家看到了,那个不是我最好的水平,因为有点紧张,我最高分曾打到6000多分.当然我是练习了很久了,并不是我比大家更厉害,而是 ...
- react native touchable
<Button style={{marginTop: 30}} onPress={() => { Alert.alert("你点击了按钮!"); }} onPressI ...
- what's the 数据结构
目录 栈 队列 链表与双向链表 哈希表 二叉搜索树 what's the 数据结构 数据结构是指相互之间存在着一种或多种关系的数据元素的集合和该集合中数据元素之间的关系组成. 简单来说,数据结构就是 ...
- RN-系列
8081端口被占用,McAfee Agent关不掉 sudo lsof -n -i4TCP:8081 sudo launchctl list | grep 5693 sudo launchctl re ...
- bcolz的新操作
1.直接修改 eg:把data.bcolz文件中A列为0的数据填充为1000. data = bcolz.open("data.bcolz", "a") #以& ...
- sap 调试工具,修改变量值
1: 点击修改,输入变量值,按enter键.
- Node.js学习看这里:基础、进阶、文章
Node.js是基于Chrome JavaScript运行时建立的一个平台,实际上它是对Google Chrome V8引擎进行了封装,它主要用于创建快速的.可扩展的网络应用. Node.js采用事件 ...
- 关于bjam编译自己模块出错的问题
将这个目录下C:\Users\Regubed的user-config.jam改为下面内容 # MSVC configurationusing msvc : 9.0 ; # Python configu ...