<!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. StrokePlus常用脚本

    1.按照时间创建文本文件并打开 文本文件并没有什么快捷方式,每次都要右键,找新建,找文本文档,临时写点什么还要保存,写名字,懒得写就打aa,bb的,挺烦的. 难点在于用lua没法知道当前鼠标所在的文件 ...

  2. golang并发（1）介绍

    概述 简而言之,所谓并发编程是指在一台处理器上“同时”处理多个任务. 随着硬件的发展,并发程序变得越来越重要.Web服务器会一次处理成千上万的请求.平板电脑和手机app在渲染用户画面同时还会后台执行各 ...

  3. linux常用命令 history命令

    历史命令 history [选项] [历史命令保存文件] 选项 '-c' 清空历史命令 '-w' 把缓存中的历史命令写入历史命令保存文件~/.bash_history [root@ssgao1987 ...

  4. Mysql phpStudy升级Mysql版本，流产了怎么办？

    网上有一些phpStudy升级mysql的方法,如: https://www.cnblogs.com/GreenForestQuan/p/6496431.html 很不错,我的电脑一次成功,但是同事的 ...

  5. LeetCode Best to buy and sell stock

    Best Time to Buy and Sell Stock 题目大意;给定数组a[..],求解max a[j]-a[i]    j>i 解决思路:将数组a的相邻值相减(右边减左边)变换成数组 ...

  6. leetcode python 032 识别最长合法括号

    # 给定一个只包含字符'('和')'的字符串,# 找到最长的有效(格式良好)括号子字符串的长度.# 对于“(()”,最长的有效括号子串是“()”,其长度为2.# 另一个例子是“)()())”,其中最长 ...

  7. python基础----基础知识介绍

    一  编程语言的划分       编译型:将代码一次性全部编译成二进制,然后运行. 缺点:开发效率低,不能跨平台(windows与linux) 优点:执行效率高 代表语言:c语言 解释型:当程序开始运 ...

  8. angular2升级到angular4历程

    Angular 4 在昨天(2017-03-24)正式发布了,我的系列教程也得更新一下.步骤略繁琐,不用 cli 的项目反倒更简单一些,但是 cli 平时给我们的便利还是很多的,升级最多半年一次而已. ...

  9. Bitmap每个像素值由指定的掩码决定

    bBitmap每个像素值由指定的掩码决定 写了一个小工具来转换Bitmap彩色图片的不同位数. 程序的逻辑是拼接: Bitmap文件头 + Bitmap信息头 + Bitmap数据 在RGB888转换 ...

  10. 忘记Linux用户密码怎么办？

           忘记密码解决办法(centos6.5版本) 1.开机时,在此页面一直按ESC 2.然后进入以下界面时,按一下字母  “E”    键 (3)再按字母   “E”   键 (4)之后 输入 ...