<!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. Goland配置

    Global GOPATH 用来设置所有go项目的大目录 Project GOPATH 用来设置单项目目录 2个目录必须配置

  2. liunx centOS6.5安装jdk教程

    第一步:mkdir /usr/java/ --在/usr目录下新建一个java目录 第二步:cp jdk-7u25-linux-x64.rpm /usr/java/ --将JDK文件复制到/usr/j ...

  3. 我与java的故事

    前奏 2012年开始接触java,当时还是大二因为博客园的原因我选择了java这门语言进行深入的学习.一开始看的是<动力节点>的教学视频,请原谅我已经忘记那个讲师叫什么名字.但是的项目叫E ...

  4. 前端---js02

    主要内容 1.数组 2.字符串 3.Date日期对象 4.内置对象 5.定时器 6.DOM 7.伪数组 内置对象: 1 数组(列表) Array (1) 数组的创建 <script>//字 ...

  5. vue 使用canvas仿芝麻分信用表

    如图所示: 画布组件:dashboard.vue <template> <div> <canvas ref="canvas" v-if="c ...

  6. Creation of SecureRandom instance for session ID generation using [SHA1PRNG] took [33,755] milliseconds.

    刚部署好程序,第一次登录时,加载非常得慢,查看log日志发现:Creation of SecureRandom instance for session ID generation using [SH ...

  7. Python 模块调用的变量与路径

    自己编写的python代码经常需要分模块文件以及包,梳理一下调用顺序.执行顺序.工作路径.函数与变量等 工作路径 首先是工作路径,当模块代码放在统一的包内的时候,其路径和外层的包路径不同,当作为主调用 ...

  8. python glob模块使用笔记（更新）

    glob模块是通配用的,用于列出符合通配格式的文件 glob.glob(path) path是用于匹配的字符串,类似简单版的正则吧 其中 * 匹配任意多个字符 ? 匹配一个字符 [1-9] 匹配指定范 ...

  9. 学习笔记CB013: TensorFlow、TensorBoard、seq2seq

    tensorflow基于图结构深度学习框架,内部通过session实现图和计算内核交互. tensorflow基本数学运算用法. import tensorflow as tf sess = tf.S ...

  10. [C++]_ELVE_Windows下QT5.12连接MySql8.0解决方案

    #0x01 准备 1)要保证QT和MySQL都是一样的位数,我的就是都安装的64位. 2)安装Qt5.12,这里主要提一点,在安装时候,有个选择插件那块,尽量都选上,里面有个database选项,记得 ...