<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>hello world</title>

 </head>

 <body>

     <div id="app">

         <div>

             <!-- 4、<router-link>默认会被渲染成一个 `<a>` 标签 ,to指令跳转到指定路径 -->

             <router-link to="/home">Go to Home</router-link>

             <router-link to="/about">Go to About</router-link>

         </div>

         <!-- 5、在页面上使用<router-view></router-view>标签，用于渲染匹配的组件 -->

         <router-view></router-view>

     </div>

     <!-- 0、引入依赖库（类库需要下载） -->

     <script src="vue.min.js"></script>

     <script src="vue-router.js"></script>

     <script type="text/javascript">

         /* 1、创建组件 */

         const Home = Vue.extend({

             template: '<div><h1>Home</h1><p>{{msg}}</p></div>',

             data: function() {

                 return {

                     msg: 'Hello, vue router!'

                 }

             }

         });

         const About = Vue.extend({

             template: '<div><h1>About</h1><p>This is the tutorial about vue-router.</p></div>'

         });

         // 2. 创建 router 实例，然后传 `routes`路由映射 配置

         const router = new VueRouter({

           routes: [

             { path: '/home', component: Home },

               { path: '/about', component: About },

               { path: '/', component: Home } //设置默认路径

            ]}

            );

         // 3. 创建和挂载根实例。记得要通过 router 配置参数注入路由，从而让整个应用都有路由功能

         const vm = new Vue({

               router: router

         }).$mount('#app');

         // 现在，应用已经启动了！

     </script>

 </body>

 </html>

vue路由简单实用的更多相关文章

  1. 这两天老是有兄弟问到Vue的登陆和注册，登陆成功留在首页，没有登录回到登录页面，现在我用最简单实用的方法实现（两分钟技就看懂）

    其实登录注册,并且登录一次保持登录的状态,是每个项目都需要实现的功能. 网上也有很多的方法,不过,不是通俗易懂,在这里说一下我自己的方法,非常简单实用核心就是用localStorage存.取数据,这样 ...

  2. 简单配置Vue路由

    简单配置Vue路由 1.  创建一个单文件组件Test.vue <template> <div>Test</div> </template> <s ...

  3. Vue 路由的简单使用(命名路由、query路由传参、params路由传参)

    1 # Vue 路由 2 # 1.理解:一个路由(toute)就是一组映射关系(key-value),多个路由需要路由器(router)进行管理 3 # 2.前端路由:key是路径,value是组件 ...

  4. Vue路由模块化的实现方法

    分享一个Vue路由模块化方法,简单实用,好用到飞起 路由模块化 1.router/index.js 配置路由 import Vue from 'vue' import VueRouter from ' ...

  5. Linux下好用的简单实用命令

    1.你是否为在输入了一大串命令之后发现第一个字符打错了而苦恼?只能删除重来嘛?或者一步步左移光标? NO,一个组合键轻松搞定 Ctrl+A -----到命令行首 Ctrl+E ------到命令行末 ...

  6. react构建淘票票webapp，及react与vue的简单比较。

    前言 前段时间使用vue2.0构建了淘票票页面,并写了一篇相关文章vue2.0构建淘票票webapp,得到了很多童鞋的支持,因此这些天又使用react重构了下这个项目,目的无他,只为了学习和共同进步! ...

  7. Vue路由vue-router

    前面的话 在Web开发中,路由是指根据URL分配到对应的处理程序.对于大多数单页面应用,都推荐使用官方支持的vue-router.Vue-router通过管理URL,实现URL和组件的对应,以及通过U ...

  8. 攻克vue路由

    先下手 路由是个好功能,但是每次都感觉没法开始下手,愣愣的看半天官方文档,所以做个快速开始教程. 首先先搭好HTML文件结构: <!--link和view在一个父元素下--> <di ...

  9. Vue路由学习心得

    GoodBoy and GoodGirl~进来了就看完点个赞再离开,写了这么多也不容易的~ 一.介绍  1.概念:路由其实就是指向的意思,当我们点击home按钮时,页面中就要显示home的内容,点击l ...

随机推荐

  1. 指令——mv

    一个完整的指令的标准格式: Linux通用的格式——#指令主体(空格) [选项](空格) [操作对象] 一个指令可以包含多个选项,操作对象也可以是多个. 指令:mv   (move,移动,剪切) 作用 ...

  2. C++实现单链表的12种基本操作

    C++单链表的操作2017-12-25 1 // 单链表.cpp: 定义控制台应用程序的入口点. //Author:kgvito //Date: 2017.12.25 #include "s ...

  3. css画布

    绘制基本图形 绘制直线 <style> .canvas{ } </style> <canvas id="myCanvas1" style=" ...

  4. 吴裕雄--天生自然C++语言学习笔记：C++ 类 & 对象

    C++ 在 C 语言的基础上增加了面向对象编程,C++ 支持面向对象程序设计.类是 C++ 的核心特性,通常被称为用户定义的类型. 类用于指定对象的形式,它包含了数据表示法和用于处理数据的方法.类中的 ...

  5. springboot - 映射 /error 到自定义且实现了ErrorController的Controller

    1.总览 2.代码 1).pom.xml <dependencies> <dependency> <groupId>org.springframework.boot ...

  6. 基础语法-循环结构for

    基础语法-循环结构for 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.for循环格式 for(初始化表达式;循环条件表达式;循环后的操作表达式){ 执行语句(循环体); } ...

  7. 2016蓝桥杯省赛C/C++A组第八题 四平方和

    题意: 四平方和定理,又称为拉格朗日定理: 每个正整数都可以表示为至多4个正整数的平方和. 如果把0包括进去,就正好可以表示为4个数的平方和. 比如: 5 = 0^2 + 0^2 + 1^2 + 2^ ...

  8. MFC 选择文件夹

    WCHAR szPath[_MAX_PATH] = {}; BROWSEINFO bi; //指定父窗口,在对话框显示期间,父窗口将被禁用 bi.hwndOwner = this->GetSaf ...

  9. 碎碎念（DP）

    链接:https://ac.nowcoder.com/acm/contest/3006/F来源:牛客网 题目描述 在ACM比赛里,除了CE以外都是有效的提交.每一个提交都会有其评测的结果,或是AC,或 ...

  10. 使用H5搭建webapp主页面

    使用H5搭建webapp主页面 前言: 在一个h5和微信小程序火热的时代,作为安卓程序员也得涉略一下h5了,不然就要落后了,据说在简历上可以加分哦,如果没有html和css和js基础的朋友,可以自行先 ...