<!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. MongoDB 教程（六）：创建集合、删除集合

    MongoDB 创建集合 MongoDB 中使用 createCollection() 方法来创建集合. 语法格式: db.createCollection(name, options) 参数说明: ...

  2. git(一) 基本操作

    git简介 产生历史 git是目前世界上最先进的分布式版本控制系统. 2005年,Linus花了两周时间自己用C写了一个分布式版本控制系统,这就是git. git的两个特点 版本控制:可以解决多人同时 ...

  3. 诡异的bug！！

    在我些项目的时候,命名从来没有用过 font 元素,但是打开 Chrome 浏览器查看元素时,总是 font 元素???而且写的 <span class= "xxx"> ...

  4. LinuxTimeLine

  5. 《JavaScript Dom 编程艺术》读书笔记-第9章

    SS-DOM,本章内容: style属性 如何检索样式 如何改变样式三页一体的网页 结构层:由HTML或XHTML之类的标记语言负责创建.标签(tag)也就是尖括号里的单词,对网页内容的语义含义做出了 ...

  6. UVALive5966(bfs)

    题意:给你一张n*m的图,其中: “ . ”代表可以走的空地 “ # ”代表不能走的墙 “ * ”代表传送门,当你从一个非传送们走到一个传送门的时候,你只能选择传送到除这个传送们外其他的传送门,如过没 ...

  7. linux安装mysql图文教程

    ---恢复内容开始--- 1.下载mysql [root@localhost ~]# yum install mysql mysql-server 输入y 输入y 输入y 下载完成 接下来我们要使用w ...

  8. keil的51项目创建

    keil的51项目创建步骤: 工程创建: Project->New uVision Project 项目命名:如...test CPU->Atmel::AT89C51 文件创建: File ...

  9. java学习笔记41（数据库连接池 C3p0连接池）

    在之前的学习中,我们发现,我们需要频繁的创建连接对象,用完之后还需要在关闭资源,因为这些连接对象都是占资源的,但是又不得不创建,比较繁琐,为了解决这种情况,Java出现了数据库连接池: 数据库连接池的 ...

  10. SpringBoot（四）thymeleaf+MyBatis+MySql

    接着上一节 1.第一步:在pom文件中添加 <!-- MyBatis --> <dependency> <groupId>org.mybatis.spring.bo ...