vue路由 视图命名
2024-08-31 19:28:34
<body>
<div id="app">
<p @click="go">hello app!</p>
<p @click="pas">back path</p>
<router-view name="a"></router-view>
<router-view name="b"></router-view>
</div> </body>
<script>
const Foo = { template: '<div>foo</div>' };
const Baz = { template: '<div>test</div>' };
const Aaz = { template: '<div>Aaz</div>' };
const router = new VueRouter({
routes : [
{
path: '/',
components: {
default: Foo,
a: Baz,
b: Foo
}
},
{
path: '/home',
components: {
default: Foo,
a: Foo,
b: Aaz
}
}
]
}); const app = new Vue({
router,
methods:{
go(){
router.push({
path: '/home'
});
},
pas(){
router.push({
path: '/'
});
}
}
}).$mount('#app');
一个页面里面可以多视图，不同的链接可以导航到同一个页面，但是页面可以根据参数渲染不同的组件形式
最新文章
- Hibernate原理解析-Hibernate中实体的状态
- ajax容易忽视的细节
- New Training Table
- 【USACO 2.2】Party Lamps
- 远程通知APNs（Apple Push Notification Server）
- LINUX 文件系统JBD ----深入理解Fsync
- MyEclipse默认编码为GBK，修改为UTF8的方法
- Delegation事情委托或代理
- SSH协议（转载）
- 受够了if (ModelState.IsValid)？ActionFitlter也是一路的坑啊！
- PHP 通过fsockopen函数获取远程网页源码
- __x__(31)0908第五天__导航条的练习 <ul> 版本
- linux的基本操作(一)
- Java NIO工作机制简介
- loj 10181 绿色通道 二分答案+单调队列DP
- Linux安装nodejs和npm
- SVProgressHUD提示框IOS
- ajax多级菜单栏
- Java——String，StringBuffer,StringBuilder
- Strus默认跳转方式是请求转发 地址栏不变 与javaweb的内部转发一样