<!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 路由别名 路由跳转的更多相关文章

  1. 每天一点点之vue框架开发 - vue-router路由进阶（路由别名、跳转、默认路由、二级路由、路由守卫）

    路由别名   在main.js中的路由中添加name来创建别名 const routes = [ {path:'/footer',name:footerLink,component:Footer} ] ...

  2. 064——VUE中vue-router之使用路由别名定制(alias)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. vue中的路由的跳转的参数

    vue中的路由跳转传参 params 与 query this.$router.push({ name:"detail", params:{ name:'nameValue', c ...

  4. 解决vue单页路由跳转后scrollTop的问题

    作为vue的初级使用者,在开发过程中遇到的坑太多了.在看页面的时候发现了页面滚动的问题,当一个页面滚动了,点击页面上的路由调到下一个页面时,跳转后的页面也是滚动的,滚动条并不是在页面的顶部 在我们写路 ...

  5. 058——VUE中vue-router之实例操作新闻列表单页面应用与路由别名的使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Vue中的路由 以及默认路由跳转

    https://router.vuejs.org/ vue路由配置: 1.安装 npm install vue-router --save / cnpm install vue-router --sa ...

  7. Vue 中的Vue Router一级路由，二级路由，三级路由以及跳转

    今天编写了一下Vue中的路由 先用命令行新建一个空的项目,并且我知道要用路由,就下载了路由的相关依赖 vue init webpack demo5 完毕之后进入所在的项目 cd demo5 之后用vs ...

  8. Vue 实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案

    Vue实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案   by:授客 QQ:1033553122   开发环境   Win 10   Vue 2.9.6   node-v ...

  9. Vue编程式路由跳转传递参数

    Vue 有时在路由跳转时需要用到一些原页面里的数据,用以下方法: 1.在跳转页的方法里写下query参数 TableChange(scope){ this.$router.push({ path:'d ...

随机推荐

  1. String 和 StringBuilder

    官方解释 String  String 类代表字符串.字符串是常量:它们的值在创建之后不能更改. StringBuilder 一个可变的字符序列. 疑问 字符串是常量:它们的值在创建之后不能更改.那 ...

  2. 《Java编程思想》读书笔记-第一个Java程序

    积少成多,欢迎大家关注我的微信公众号,共同探讨Java相关技术 今天的重点是:编写源代码.编译.运行.查看成果.除此之外,还需要搭建起与前面学习的知识的联系. 写本文时依据的系统环境是Windows1 ...

  3. 使用nginx反向代理实现多端口映射（未解决）

    问题: 想实现访问在同一个主机上实现多个域名访问, 如用 blog.xxx.com访问博客(使用8000端口), app.xxx.com访问其他应用(使用8080端口): 不同的服务用URL区分,不用 ...

  4. 工具提高效率 - iterm2

    快捷键 command + d, command + shift +d 显示所有记录 ITERM默认设置了终端能保留的历史输出行数,在进行调试时特别不方便,一旦输出过多就无法看到完整的历史记录. 在P ...

  5. width属性

    宽度属性 width:长度值|百分比|auto 最大宽度:max-width 最小宽度:min-width 说明:设置块级元素和替换元素的内容宽度.

  6. linux压缩、解压缩和归档工具

    linux基础之压缩.解压缩和归档工具 1.压缩工具 基本介绍 为了减少文件的原来的文件大小而过多的浪费磁盘的存储空间,我们使用压缩后多文件进行存储 压缩工具的介绍 compress:把文件压缩成以. ...

  7. 自适应reset.js布局 用于手机端页面编写

    以下是reset.js具体内容,是从淘宝网站拔下来的.把它存为js文件引入html里,它的默认尺寸是iphone4的分辨率也就是320*480,美工给你的图不管多少尺寸用ps量图后像素值(px)除以4 ...

  8. SpringBoot使用Druid数据库加密链接完整方案

    网上的坑 springboot 使用 Druid 数据库加密链接方案,不建议采用网上的一篇文章<springboot 结合 Druid 加密数据库密码遇到的坑!>介绍的方式来进行加密链接实 ...

  9. 2018.5.11 B树总结

    小结 B树:二叉树,每个结点只存储一个关键字,等于则命中,小于走左结点,大于 走右结点: B-树:多路搜索树,每个结点存储M/2到M个关键字,非叶子结点存储指向关键 字范围的子结点: 所有关键字在整颗 ...

  10. centos7设置定时任务

    第一种方式修改/etc/crontab文件,这种方式是系统的周期任务,只能root用户才可以执行 SHELL=/bin/bashPATH=/sbin:/bin:/usr/sbin:/usr/binMA ...