一个VUE的小案例
2024-09-07 14:21:48
<!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-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>
</head>
<body>
<div id="app">
<router-link to="/goodslist">商品列表</router-link>
<router-link to="/newslist">新闻列表</router-link><br/> <!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
</body>
<script>
//1.定义好组件
const newsListComponent = Vue.extend({
template:'<ul><li>美、英、法联合侵略叙利亚</li><li><router-link to="/newsdetail/10001">乘客用钢笔把飞机逼停了</router-link></li><li><router-link to="/newsdetail/10006">韩国戴眼镜女主播</router-link></li></ul>'
}) const goodsListComponent = {
template:'<ul><li>卫龙辣条</li><li>麻辣小龙虾</li><li>长沙臭豆腐</li></ul>'
} //新闻详情组件
//拿到路径中的参数,可以参考https://router.vuejs.org/zh-cn/essentials/dynamic-matching.html
const newsDetailComponent = {
template:'<div>我是新闻详情 传递过来的id是 {{$route.params.newsId}}</div>'
} //2.创建路由对象,设置路由规则
const router = new VueRouter({
routes:[//其中routes很容易写错,建议拷贝
{ path: '/', redirect: '/goodslist' },
{path:'/goodslist',component:goodsListComponent},
{path:'/newslist',component:newsListComponent},
{path:'/newsdetail/:newsId',component:newsDetailComponent}
]
}) //3. 注入到根实例,从而让整个应用都有路由功能
const vm = new Vue({
router
}).$mount('#app')
</script>
</html>
很好理解吧
最新文章
- 【C#进阶系列】27 I/O限制的异步操作
- CSS样式表
- NC凭证接口(Java发送流和处理返回结果)
- 基本排序算法——基数排序java实现
- WPS for Linux,系统缺失字体
- Python与C++结构体交互
- linux下如何使用sftp命令【转】
- [转载]CRect::DeflateRect
- 分享一下学习css,js心得
- 前端CSS参考阅读
- C++中使用心得
- uva12034Race
- MATLAB中多行注释的三种方法
- 模块化的JavaScript开发的优势在哪里
- ubuntu 15.04怎么安装QQ
- vscode创建net core控制台程序
- [Swift]LeetCode253.会议室 II $ Meeting Rooms II
- 个人实战演练全过程——No.1 最大连续子数组求和
- 数据库 --- 4 多表查询 ,Navicat工具 , pymysql模块
- MySQL Transaction--事务无法正常回滚导致的异常
热门文章
- mooc_java 集合框架上 学生所选课程
- Mysql中文检索匹配与正则
- leetcode 102 Binary Tree Level Order Traversal(DFS||BFS)
- 从结果推断过程----->;使用System.out和Root Device
- MySQL多个条件以什么表当做主条件表_20161111周五
- ScikitLearn 学习器类型
- linux cpu内存利用率获取
- 塞尔达:旷野之息个人对比上古卷轴V:天际
- [51nod1065]最小正子段和
- Jmeter JDBC Request 中文乱码问题