vue 路由别名 路由跳转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.js"></script>
</head>
<body>
<div id="hdcms">
<router-view></router-view>
</div>
<script type="text/x-template" id="home">
<div>
<li v-for="v in news">
<router-link :to="{name:'content',params:{id:v.id}}">{{v.title}}</router-link>
</li>
</div>
</script>
<script type="text/x-template" id="content">
<div>
<h1>{{field.title}}-{{field.id}}</h1>
<p>
{{field.content}}
</p>
<router-link to="/">返回首页</router-link>
</div>
</script>
<script>
var data = [
{id:1,title:'HDPHP开源免费框架',content:'这是内容....'},
{id:2,title:'HDCMS内容管理系统',content:'这是HDCMS内容....'}
];
const home = {
template: '#home',
data(){
return {
news:data
}
}
}
const content = {
template: '#content',
data(){
return {
field:{}
}
},
mounted(){
var id =this.$route.params.id;
for(let k=0;k<data.length;k++){
if(data[k].id==id){
this.field = data[k];
}
}
}
}
let routes = [
{path: '/', component: home},
{path: '/content/:id', component: content,name:'content'},
];
//要把组件交给路由器
let router = new VueRouter({routes});
new Vue({
el: '#hdcms',
router
});
</script>
</body>
</html>
vue 路由别名 路由跳转的更多相关文章
- 每天一点点之vue框架开发 - vue-router路由进阶（路由别名、跳转、默认路由、二级路由、路由守卫）
路由别名 在main.js中的路由中添加name来创建别名 const routes = [ {path:'/footer',name:footerLink,component:Footer} ] ...
- 064——VUE中vue-router之使用路由别名定制(alias)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue中的路由的跳转的参数
vue中的路由跳转传参 params 与 query this.$router.push({ name:"detail", params:{ name:'nameValue', c ...
- 解决vue单页路由跳转后scrollTop的问题
作为vue的初级使用者,在开发过程中遇到的坑太多了.在看页面的时候发现了页面滚动的问题,当一个页面滚动了,点击页面上的路由调到下一个页面时,跳转后的页面也是滚动的,滚动条并不是在页面的顶部 在我们写路 ...
- 058——VUE中vue-router之实例操作新闻列表单页面应用与路由别名的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue中的路由 以及默认路由跳转
https://router.vuejs.org/ vue路由配置: 1.安装 npm install vue-router --save / cnpm install vue-router --sa ...
- Vue 中的Vue Router一级路由，二级路由，三级路由以及跳转
今天编写了一下Vue中的路由 先用命令行新建一个空的项目,并且我知道要用路由,就下载了路由的相关依赖 vue init webpack demo5 完毕之后进入所在的项目 cd demo5 之后用vs ...
- Vue 实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案
Vue实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案 by:授客 QQ:1033553122 开发环境 Win 10 Vue 2.9.6 node-v ...
- Vue编程式路由跳转传递参数
Vue 有时在路由跳转时需要用到一些原页面里的数据,用以下方法: 1.在跳转页的方法里写下query参数 TableChange(scope){ this.$router.push({ path:'d ...
随机推荐
- Linux系统安装与初用
1.结合实验尝试,并查阅资料,总结在实验准备中提出的7个问题. (1).Linux的发行版本.内核版本:二者区别与联系. 核心版本主要是Linux的内核,发行版本是各个公司推出的版本,他们与核心版本是 ...
- 停止node进程和查看react-native-cli
taskkill /f /t /im node.exe which react-native
- 台达VFD-B变频器调试
一.变频器上电调试 变频器安装完成后,断开变频器的输出,在没通电前先使用数字表的二极管档对变频器的输入输出进行测量,确保无短路情况,然后接通变频器工作电源,(注意变频器标定的工作电源电压与外部输入电压 ...
- 利用 SPICE 分析理解心电图前端中的右腿驱动
[导读] 心电图(ECG)学是一门将心脏离子去极(ionic depolarization) 后转换为分析用可测量电信号的科学.模拟电子接口到电极/患者设计中最为常见的难题之一便是优化右腿驱动 ( ...
- Oracle数据仓库套件
OBIEE RPD:定义不同分析的主题角度,确定相应的事实表和维度表 报表层:选取需要的维度和度量,根据筛选器选取需要的数据 可视化:用图形展示数据,支持常见的图形:如折线图,饼图,堆叠图等. ODI ...
- HDU - 6203:ping ping ping (DFS序 贪心)
pro:给定N+1个点的树,有M对关键点,现在让你破坏最少的点,使得M对关键点不连通. sol:贪心,我们把M对点按照LCA深度排序,每次破坏LCA. 如果一对点(u,v,lca),u-lca-v有点 ...
- flask 图文混排的简单操作
1.引入js 包<script type="text/javascript" src="../../static/news/js/jquery-1.12.4.min ...
- SQLI DUMB SERIES-20
(1)登录成功后页面: (2)登录成功后,用burp开始抓包,刷新浏览器页面,将会跳出如下页面 (3)根据各种提示,知道需要从cookies入手,寻找闭合方式 闭合方式为单引号.注释符也可以用 (4) ...
- 输入框VS软键盘
最近在做一个h5的时候遇到的问题 我们都知道当页面上的有输入框被选中了,这个时候就回调出键盘用户可以输入.但是安卓手机在弹出键盘时页面的输入框也会被覆盖住: 以下为暂时的解决办法:(以下方法同时解决了 ...
- [ Codeforces Round #554 (Div. 2) C]
C. Neko does Maths time limit per test 1 second memory limit per test 256 megabytes input standard i ...