<!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. html+jquery实现简单图片裁剪

    有了上一篇图片放大镜的铺垫,今天的这个例子是缩小镜,因为裁剪的原图往往很大,不能在工作区域看到全部图片,所以,要有缩小镜来显示,当前裁剪的区域是原图的个部分.按照惯例首先看下效果图: 功能一:载入默认 ...

  2. SQL注入之Sqli-labs系列第四十六关(ORDER BY注入）

    0X1查看页面 0x2源码 <?php include("../sql-connections/sql-connect.php"); $id=$_GET['sort']; i ...

  3. C#版的 Escape() 和 Unescape()

    Escape: 复制代码 代码如下: public static string Escape(string str) { StringBuilder sb = new StringBuilder(); ...

  4. 2018 ICPC南京网络赛 L Magical Girl Haze 题解

    大致题意: 给定一个n个点m条边的图,在可以把路径上至多k条边的权值变为0的情况下,求S到T的最短路. 数据规模: N≤100000,M≤200000,K≤10 建一个立体的图,有k层,每一层是一份原 ...

  5. Altium Designer 10 执行DRC发现有 Length Constraint 解决办法

    在PCB布局连线结束后,执行DRC,结果Length Constraint 报错,如图: 在Design Rules中找对应的规则约束,怎么也找不见. 其实是,在差分对进行等长蛇形绕线的步骤中,约束了 ...

  6. PKU《程序设计》专项课程_递归汉诺塔问题

    取自coursera.org上公开课北京大学<C程序设计进阶> 递归调用注意的点 1.关注点放在求解的目标上,递推是,目标放在开头 2.找到第N次和第(N-1)次之间的关系,通项公式 3. ...

  7. HBase学习笔记2 - HBase shell常用命令

    转载请标注原链接:http://www.cnblogs.com/xczyd/p/6639397.html 扫表的时候限定行数 scan } 即为扫表的时候,限定只输出五条数据 ＝＝＝＝＝＝＝＝＝＝＝＝ ...

  8. 三大前端框架（react、vue、angular2+）父子组件通信总结

    公司业务需要,react.vue.angular都有接触[\无奈脸].虽然说可以拓展知识广度,但是在深度上很让人头疼.最近没事的时候回忆各框架父子组件通信,发现很模糊,于是乎稍微做了一下功课,记录于此 ...

  9. 二维数组 \n是换行 三目运算符 if语句示例

    今天学习了二维数组 // 1.定义数组array并赋值 // var arr1=[1,2,3,4,5,]; // alert(arr1[2]); 数组的长度就是值的多少 获取数值的长高度=最大下标+1 ...

  10. 《DSP using MATLAB》Problem 7.14

    代码: %% ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ %% Output In ...