index.html：

 <!DOCTYPE html>

 <html>

 <head>

     <title></title>

     <meta charset="utf-8">

     <script src="http://unpkg.com/vue/dist/vue.js"></script>

     <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

 </head>

 <body>

     <div id="box">

         <p>

            <!-- 使用 router-link 组件来导航. -->

             <!-- 通过传入 `to` 属性指定链接. -->

             <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->

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

         <router-link to="/news">news</router-link>

       </p>

           <!-- 路由出口 -->

           <!-- 路由匹配到的组件将渲染在这里 -->

           <router-view></router-view>

     </div>

     <script type="text/javascript">

         // 1. 定义（路由）组件。

         const Home = { template: '<div>首页</div>' }

         const News = { template: '<div>新闻</div>' }

         // 2. 定义路由

         // 每个路由应该映射一个组件

         const routes = [

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

           { path: '/news', component: News }

         ]

         // 3. 创建 router 实例，然后传 `routes` 配置

         const router = new VueRouter({

           routes // （缩写）相当于 routes: routes

         })

         // 4. 创建和挂载根实例。

         // 记得要通过 router 配置参数注入路由，

         // 从而让整个应用都有路由功能

         const app = new Vue({

           router

         }).$mount('#box')

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

     </script>

 </body>

 </html>

路由重定向

上面代码，我们应该设置打开浏览器就默认调整到 “首页”，所以需要把根路由/重定向到/home。 
修改路由配置：

 const routes = [

              { path: '/', redirect: '/home' },

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

             { path: '/news', component: News }

         ]

1：建立路由组件

2：建立映射

3：建立路由实例

4：使用router-link建立路由导航

5：使用router-view建立路由出口

vue-router基本概念及使用的更多相关文章

  1. 前端MVC Vue2学习总结（八）——Vue Router路由、Vuex状态管理、Element-UI

    一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...

  2. Vue Router的入门以及简单使用

    Vue Router 是Vue官方的路由管理器,是Vue用来实现SPA的插件.它和 Vue.js 的核心深度集成,让构建单页面应用(SPA)变得易如反掌. 基本概念: 路由:是一种映射关系,是 “pa ...

  3. [Vue 牛刀小试]：第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制

    一.前言 前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的.那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由 ...

  4. Vue躬行记（8）——Vue Router

    虽然Vue.js未提供路由功能,但是官方推出了Vue Router(即vue-router库),以插件的形式支持.它与Vue.js深度集成,可快速的创建单页应用(Single Page Applica ...

  5. [Vue 牛刀小试]：第十三章 - Vue Router 基础使用再探（命名路由、命名视图、路由传参）

    一.前言 在上一章的学习中,我们简单介绍了前端路由的概念,以及如何在 Vue 中通过使用 Vue Router 来实现我们的前端路由.但是在实际使用中,我们经常会遇到路由传参.或者一个页面是由多个组件 ...

  6. 「vue基础」一篇浅显易懂的 Vue 路由使用指南（ Vue Router 上）

    大家好,今天的内容,我将和大家一起聊聊 Vue 路由相关的知识,如果你以前做过服务端相关的开发,那你一定会对程序的URL结构有所了解,我没记错的话也是路由映射的概念,需要进行配置. 其实前端这些框架的 ...

  7. 04 Vue Router路由管理器

    路由的基本概念与原理 Vue Router Vue Router (官网: https://router.vuejs.org/zh/)是Vue.js 官方的路由管理器. 它和vue.js的核心深度集成 ...

  8. Vue Router详细教程

    1.什么是路由 1.1路由简介 说起路由你想起了什么?路由是一个网络工程里面的术语. 路由(routing)就是通过互联的网络把信息从源地址传输到目的地址的活动. --- 维基百科 额,啥玩意? 没听 ...

  9. Vue Router的简单了解

    Vue Router Vue Router官方文档 传统Web项目开发往往采用超链接实现页面之间的切换和跳转.Vue开发的是单页面应用(Single Page Application,SPA),不能使 ...

  10. Vue 2.0 + Vue Router + Vuex

    用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node.js(包括了 npm).vue-cli 项目结构如图所示: ass ...

随机推荐

  1. okhttp3.4.1+retrofit2.1.0实现离线缓存

    关于Retrofit+OkHttp的强大这里就不多说了,还没了解的同学可以自行去百度.这篇文章主要讲如何利用Retrofit+OkHttp来实现一个较为简单的缓存策略:即有网环境下我们请求数据时,如果 ...

  2. CentOS7 Rsync服务搭建-Rsync+Inotify架构实现实时同步

    一.rsync 概念 1.rsyncrsync是类unix/linux系统下的数据镜像备份工具.使用快速增量备份工具Remote Sync可以远程同步,支持本地复制,或者与其他SSH.rsync主机同 ...

  3. Jenkins下载安装

    Jenkins是什么? Jenkins是一个功能强大的应用程序,允许持续集成和持续交付项目,无论用的是什么平台.这是一个免费的源代码,可以处理任何类型的构建或持续集成.集成Jenkins可以用于一些测 ...

  4. Spring学习总结之面向切面（AOP）

    AOP术语 通知(advice):定义切面是什么以及什么时候使用 连接点(join point):应用在执行过程中能够插入切面的点 切点(pointcut):切点的定义会匹配通知所要织入的一个或多个连 ...

  5. 20172319 《Java程序设计教程》第7周学习总结

    20172319 2018.04.11-16 <Java程序设计教程>第7周学习总结 目录 教材学习内容总结 教材学习中的问题和解决过程 代码调试中的问题和解决过程 代码托管 上周考试错题 ...

  6. Beta阶段综合报告

    一. 敏捷冲刺每日报告 http://www.cnblogs.com/mia0502/p/7767628.html http://www.cnblogs.com/mia0502/p/7773872.h ...

  7. 我与git“美妙”的一天

    今天是第一天使用git,苦不堪言,感觉服务器和自己都要爆炸了,弄了半天才马马虎虎会了一点,基本流程如下 1.在mukever.online注册用户 2.下载git for windows(一个客户端) ...

  8. vs2013c#测试using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; namespace ConsoleApplication1_CXY { class Program { stati

    首先安装Unit Test Generator.方法为:工具->扩展和更新->联机->搜索“图标为装有蓝色液体的小试管.Unit Test Generator”, 编写代码,生成一个 ...

  9. 链表的C/C++实现

    一个链表实现,函数声明放在 list.h 头文件汇总,函数定义放在list.cpp 中,main.cpp 用来测试各个函数. 1.文件list.h // list.h #ifndef __LIST_H ...

  10. K8S 使用NFS 创建PV和PVC的例子 学习From https://blog.csdn.net/xts_huangxin/article/details/51494472

    1. 获取资料 网址: https://blog.csdn.net/xts_huangxin/article/details/51494472  感谢原作者 这里面 按照自己的机器情况进行了学习模仿 ...