<!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. springcloud入门-什么是springcloud

    1.单体应用架构存在的问题 一个归档包(例如war)包含所有功能的应用程序,通常称为单体应用. 相信很多项目都是从单体应用开始的,单体应用比较容易部署和测试,项目的初期,项目可以很好的运行,然而,随着 ...

  2. Makefile 宏定义 -D

    一.GCC编译器中使用:        -D macro=string,等价于在头文件中定义:#define   macro   string. 例如:-D TRUE=true,等价于:#define ...

  3. python 爬虫 记录

    python3 爬虫需要安装:requests,beautifulsoup4,html5lib 带有中文的需要这样写,要不然就会出现乱码 html = response.content.decode( ...

  4. Python—集合的操作、文件的操作

    1.集合的操作 2.文件的操作 1.集合的操作 定义: 1.不同元素组成,自动去重 2.无序 3.集合中的元素必须是不可变类型 1.集合的定义: >>> s1 = set('abcd ...

  5. eclipse中创建DataBase Connections

    1.window --> show view --> other --> Data Management --> Data Exploerer --> ok: 2.右键单 ...

  6. GitHub入门与实践 读书笔记二：Git的导入

    1.诞生背景 Linux的创始人Linus Torvalds 在2005年开发了Git的原型程序,后随着众多开发者的共同努力,现在他已经被大量的程序员采用. 2.什么是版本管理 版本管理:管理软件在开 ...

  7. Apache Flume 学习笔记

    # 从http://flume.apache.org/download.html 下载flume ############################################# # 概述: ...

  8. FreeSWITCH部署与功能配置

    一.FreeSWITCH服务部署 1.wget http://www.freeswitch.org.cn/Makefile && make install 2.cd freeswitc ...

  9. hello2 源码解析

    在hello2的项目中,采用的是Java servlet  技术来采取对项目的整体框架的搭建.编写另一个greeting的java文件,实现了一个greeting的java类来覆盖url的doGet方 ...

  10. jquery中使元素显示和隐藏方法之间的区别

    在实际的项目开发中,要使一个元素隐藏的方法有很多,比如css的多种属性和jquery的多种方法,虽然他们的作用都是使元素不可见,但是各个方法实现的原理是不一样的.下面主要介绍jquery各个元素隐藏方 ...