vue.js路由学习笔记二
2024-08-24 17:10:52
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script> <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>
</head>
<body>
<div id ="app">
<div>
<router-link to="/home">主页</router-link>
<router-link to="/news">新闻</router-link>
</div> <router-view></router-view> </div> </body>
<script>
var Home=Vue.extend({
template:'<h3>我是主页</h3>'
});
var News=Vue.extend({
template:'<h3>我是新闻</h3>'
}); var router =new VueRouter({
routes :[
{path:'/home',component:Home},
{path:'/news',component:News},
{path:'/',component:Home}
] }); var vm=new Vue({
router }).$mount('#app');
</script>
</html>
运行结果:
最新文章
- [Effective JavaScript 笔记]第45条:使用hasOwnProperty方法以避免原型污染
- C语言 malloc()与sizeof运算的盲点
- html--整站制作
- 使用NPOI操纵Excle,并输入到客户端
- CSS 元素透明
- Acdream a + b
- Salt Stack 官方文档翻译 - 一个想做dba的sa - 博客频道 - CSDN.NET
- 移动web:翻页场景动画
- SQL语句获取数据库中的表主键,自增列,所有列
- Nicholas C. Zakas谈怎样才能成为优秀的前端工程师
- Nginx配置文件nginx.conf中文详解【转】
- angularjs 给封装的模态框元素传值,和实现兄弟传值
- Codefoces 723B Text Document Analysis
- Java编写的接口测试工具
- OsharpNS轻量级.net core快速开发框架简明入门教程-基于Osharp实现自己的业务功能
- JS引擎线程的执行过程的三个阶段(一)
- すぬけ君の塗り絵 / Snuke&#39;s Coloring AtCoder - 2068 (思维,排序,贡献)
- 依赖、耦合、解耦、控制反转(IOC)、依赖注入(DI)
- linux 平台core dump文件生成
- java虚拟机内存不足,“Could not create the Java Virtual Machine”问题解决方案