<!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. 使用sed在匹配行之后增加一行数据

    需求:在原来大量的shell文件中,给出了错误信息打印,现在要求打印错误后直接退出脚本. if [ $? -eq 0 ];then echo_green "done!" else ...

  2. asp.net mvc global.asax文件详解

    一.文件概述 global.asax这个文件包含全局应用程序事件的事件处理程序.它响应应用程序级别和会话级别事件的代码. 运行时, Global.asax 将被编译成一个动态生成的 .NET Fram ...

  3. 安装网卡ifconfig不出现问题

    安装万兆网卡,Ethernet controller: Intel Corporation 82599EB 10-Gigabit SFI/SFP+ Network Connection 使用lspci ...

  4. VirtualBox安装Archlinux并配置桌面环境

    最近无聊,就找来archlinux来玩一玩,去archlinux wiki上看了一下教程.以下是操作过程. 1. 下载镜像,下载地址; 2. 启动archlinux并选择Boot Arch Linux ...

  5. Unity中对系统类进行扩展的方法

    Unity扩展系统类,整合简化代码 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- ...

  6. 如何注册Tomcat到Window Service服务

    win+R打开运行窗口,输入cmd打开dos窗口,使用cd命令将位置切换到tomcat路径下的bin文件,本机是F盘下. 先输入F:回车进入F盘,然后输入命令cd F:\apache-tomcat-5 ...

  7. webshell导致项目崩溃

    mysql挂死,无法启动,解决mysql无法启动: /etc/my.cnf配置文件中innodb_force_recovery=1然后service mysqld start/etc/my.cnf配置 ...

  8. PymongoDB_study

    import pymongo client = pymongo.MongoClient(host='localhost',port=27017)#连接数据库 #db = client.test#指定数 ...

  9. docker 网络 路由

    通过在Docker宿主机上添加静态路由实现跨宿主机通信 模拟环境 主机1(192.168.58.144) 设置docker0 网关 (172.17.0.1/16)                主机2 ...

  10. linux 软件应用

    grub2 安装grub2到某分区 mount /mnt/dev /dev/sdb2 //这里选择你刚才分区的第二个分区 sudo grub-install --root-directory=/mnt ...