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下jvm优化、tomcat调优
系统环境:jdk1.8,apache-tomcat-8.5.35 一.jvm优化 进入 bin/catalina.sh,修改JAVA_OPTS配置: JAVA_OPTS="-server - ...
- 抛开visual studio，纯手工创建asp.net mvc遇到的问题
脱离Visual Studio,只用文本编辑器..NET Framework.IIS Express创建ASP.NET MVC应用时,需要精简~/View目录下web.config文件内容,之前创建的 ...
- shell if判断写成一行
[[ $? -eq 0 ]] && echo "backup $i success" || exit #判断上一个命令是否执行正确,退出状态吗如果为0,则执行ech ...
- 在vue.js 中使用animate.css库
main.js文件引入后,在vue文件里直接添加class animated bounceInUp
- (转)hibernate 之hiberante.hbm2ddl.auto 参数的配置
我们在搭建环境的时候,在配置文件中有一个属性标签为: 完整配置如下 <?xml version='1.0' encoding='utf-8'?> <!DOCTYPE hibernat ...
- SQL设置时间格式
SELECT STR_TO_DATE('Jul 20 2013 7:49:14:610AM','%b %d %Y %h:%i:%s:%f%p') from DUAL; -- 执行后得到结果:'2013 ...
- EM 算法最好的解释
https://wenku.baidu.com/view/fcb6a52bf5335a8102d220e3.html
- 图解HTTP阅读笔记（1）-网络基础TCP/IP
1.TCP/IP协议族 TCP/IP这个概念对大家来说很熟悉,之前我的了解它只是一个协议.今天阅读才知道TCP/IP实际上是一个协议族,其中HTTP协议属于该协议族的一个子集.图1是TCP/IP协议族 ...
- oracle数据库连接缓慢
今天连接数据库时非常的慢,大概将近1分钟,才能连上,感觉不对,登录数据库所在的服务器,进行检查,常规的内存.硬盘.CPU全都正常,然后想要进入oracle用户时报错了:su: cannot set u ...
- 将jar包安装到本地repository中
mvn install:install-file -Dfile=G:/lcn_springboot2.0/tx-plugins-db-4.1.2.jar -DgroupId=com.codingapi ...