<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

     <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-link to="/hdphp">HDPHP</router-link>

         <router-link to="/hdcms">HDCMS</router-link>

         <router-view></router-view>

     </div>

     <script>

         const hdphp={

             template:'<h1>hdphp</h1>'

         }

         const hdcms={

             template:'<h1>hdcms</h1>'

         }

          let  routes=[

                 {path:'/hdphp',component:hdphp},

                 {path:'/hdcms',component:hdcms},

             ]

         let route = new VueRouter({

             routes:routes

         });

         new Vue({

             el:'#hdcms',

             router:route

         });

     </script>

 </body>

 </html>

vue route的更多相关文章

  1. 深入浅出的webpack4构建工具--webpack4+vue+route+vuex项目构建(十七)

    阅读目录 一:vue传值方式有哪些? 二:理解使用Vuex 三:webpack4+vue+route+vuex 项目架构 回到顶部 一:vue传值方式有哪些? 在vue项目开发过程中,经常会使用组件来 ...

  2. vue route.go 载入刷新

    vue route 重新载入刷新: this.$router.go({path : 'path' , query: { param: this.param} })

  3. Vue Route Building the UI back-end framework

    Vue 的 路由就像ASP.NET MVC路径相似. 路由定义文件也是js格式的,我们都将这些文件放入到src的route文件中. 后台框架主入口: <template> <div ...

  4. Vue route的使用

    1.route.js文件 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) const router = ne ...

  5. Vue route部分简单高级用法

    一改变页面title的值   在开发时常常需要在切换到不同页面时改变浏览器的title值,那么我们就可以在定义路由的时候通过配置 meta 属性 来改变title值. import Vue from ...

  6. Vue:$route 和 $router 的区别

    参考: https://uzshare.com/view/788446 https://router.vuejs.org/zh/ $route 是“路由信息对象”,包括 path,params,has ...

  7. vue route 跳转

    index.js { path: '/grouporder/grouporderdetail/id/:id', name: '/grouporder/grouporderdetail/id/', co ...

  8. 借助 Vue 来构建单页面应用

    原文: https://github.com/MeCKodo/vue-tutorial 主题 Vue.js (1/2)Vue构建单页应用最佳实战 前言 我们将会选择使用一些vue周边的库 1.使用no ...

  9. Vue.js的库，包，资源的列表大全。

    官方资源 外部资源 社区 播客 官方示例 入门 开发工具 语法高亮 代码片段 自动补全 组件集合 库和插件 路由 ajax/数据 状态管理 校验 UI组件 i18n 示例 模板 脚手架 整合 插件/指 ...

随机推荐

  1. intelij idea设置和使用git

    一.通过git从远程拉取代码到idea本地 1.git配置 2.通过git拉取远程仓库代码 图一: 图二: 3.下一步下一步即可 二.share本地仓库代码到git上 注意: 通过share会变成一个 ...

  2. python基础——元组

    元组运算符 与字符串一样,元组之间可以使用 + 号和 * 号进行运算.这就意味着他们可以组合和复制,运算后会生成一个新的元组. Python 表达式 结果 描述 len((1, 2, 3)) 3 计算 ...

  3. 马凯军201771010116《面向对象程序设计（java）》第一周学习总结

    马凯军201771010116<面向对象程序设计(java)>第一周学习总结 第一部分:课程准备部分 填写课程学习 平台注册账号, 平台名称 注册账号 博客园:www.cnblogs.co ...

  4. 莫烦tensorflow(9)-Save&Restore

    import tensorflow as tfimport numpy as np ##save to file#rember to define the same dtype and shape w ...

  5. jQuery-2.DOM---节点的删除

    DOM节点删除之empty()的基本用法 要移除页面上节点是开发者常见的操作,jQuery提供了几种不同的方法用来处理这个问题,这里我们开仔细了解下empty方法 empty 顾名思义,清空方法,但是 ...

  6. “必须执行Init_Clk函数，才能采集到二氧化碳接口485数据的问题”的解决

    这个问题困扰了我很长一段时间,而且如果这个问题不解决,就有一个无法调和的矛盾:执行Init_Clk函数,能采集到二氧化碳接口485数据,但是功耗大:不执行Init_Clk函数,不能采集到二氧化碳接口4 ...

  7. MacBook使用笔记2 - 安装windows虚拟机攻略

    转载请标注原链接:http://www.cnblogs.com/xczyd/p/5498878.html 5月初从阿里滚粗,然后失去了公司发的Mac Air.说实话Mac机器确实比windows好用一 ...

  8. nodeJS网络操作

    var http = require('http'); http.createServer(function (request, response) { response.writeHead(200, ...

  9. Combining Lexical and Grammatical Features to Improve Readability Measures for First and Second Language Texts.-paper

    http://www.aclweb.org/anthology/N07-1058 Volume:Human Language Technologies 2007: The Conference of ...

  10. Python搭建环境

    小白开启Python之门啦啦啦!!!!! 学习任何一种语言,第一步就是环境的搭建,小白python之旅开始啦!!!加油加油,抬头挺胸齐步走~~~ 目前大家开发系统主要是,windows.Mac OS ...