<!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. 在终端中使用vim命令修改某些文件，会提示文件只读模式，可以执行以下命令强制写入

    在末行模式中输入以下命令 :w !sudo tee % 回车后可能需要输入密码

  2. Echarts 一个开源图表设计工具

    一般来说,因有所需,方有所求.最近项目中有这方面的需求,用着感觉不错.特此记录!此处仅是一个简单的demo.官网地址:http://echarts.baidu.com/,相关文档.插件都有. 1.js ...

  3. StringBuilder

    在程序开发过程中,我们常常碰到字符串连接的情况,方便和直接的方式是通过"+"符号来实现,但是这种方式达到目的的效率比较低,且每执行一次都会创建一个String对象,即耗时,又浪费空 ...

  4. 使用docker部署springboot应用

    1.构造Dockerfile打包文件 # from base image centos FROM centos #MAINTAINER lirenqing #Java Version #ENV JAV ...

  5. aufac在mvc中多线程

    注册的时候 将容器放到静态变量中    xxx.IocContainer = builder.Build();            var resolver = new AutofacDepende ...

  6. css3实现条纹以及方格斜纹背景

    CSS代码: .stripes { height: 250px; width: 375px; float: left; margin: 10px; -webkit-background-size: 5 ...

  7. js··BOM 浏览器对象模型

    1.window.open(url,ways) url 是打开的网页地址 ways 打开的方式 _self 2.window.close() 3.浏览器用户信息 Window.navigator 4. ...

  8. 653. Two Sum IV - Input is a BST-easy

    我不懂有没有收藏之类的功能,收藏别人的解法. tql,不懂为什么直接比较set里的值,不是两个数sum么 有一些答案都用到了iterator迭代器 http://www.cplusplus.com/r ...

  9. SG函数和SG定理

    Fibonacci again and again 利用SG函数求出每一堆的SG值,如果三个值的异或和为零 先手必败态,否则,先手必胜态. #include <bits/stdc++.h> ...

  10. cookie 就是一些字符串信息

    什么是 Cookie “cookie 是存储于访问者的计算机中的变量.每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie.你可以使用JavaScript 来创建和取回cookie 的 ...