vue-router基本概念及使用
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基本概念及使用的更多相关文章
- 前端MVC Vue2学习总结（八）——Vue Router路由、Vuex状态管理、Element-UI
一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...
- Vue Router的入门以及简单使用
Vue Router 是Vue官方的路由管理器,是Vue用来实现SPA的插件.它和 Vue.js 的核心深度集成,让构建单页面应用(SPA)变得易如反掌. 基本概念: 路由:是一种映射关系,是 “pa ...
- [Vue 牛刀小试]：第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制
一.前言 前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的.那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由 ...
- Vue躬行记（8）——Vue Router
虽然Vue.js未提供路由功能,但是官方推出了Vue Router(即vue-router库),以插件的形式支持.它与Vue.js深度集成,可快速的创建单页应用(Single Page Applica ...
- [Vue 牛刀小试]：第十三章 - Vue Router 基础使用再探（命名路由、命名视图、路由传参）
一.前言 在上一章的学习中,我们简单介绍了前端路由的概念,以及如何在 Vue 中通过使用 Vue Router 来实现我们的前端路由.但是在实际使用中,我们经常会遇到路由传参.或者一个页面是由多个组件 ...
- 「vue基础」一篇浅显易懂的 Vue 路由使用指南（ Vue Router 上）
大家好,今天的内容,我将和大家一起聊聊 Vue 路由相关的知识,如果你以前做过服务端相关的开发,那你一定会对程序的URL结构有所了解,我没记错的话也是路由映射的概念,需要进行配置. 其实前端这些框架的 ...
- 04 Vue Router路由管理器
路由的基本概念与原理 Vue Router Vue Router (官网: https://router.vuejs.org/zh/)是Vue.js 官方的路由管理器. 它和vue.js的核心深度集成 ...
- Vue Router详细教程
1.什么是路由 1.1路由简介 说起路由你想起了什么?路由是一个网络工程里面的术语. 路由(routing)就是通过互联的网络把信息从源地址传输到目的地址的活动. --- 维基百科 额,啥玩意? 没听 ...
- Vue Router的简单了解
Vue Router Vue Router官方文档 传统Web项目开发往往采用超链接实现页面之间的切换和跳转.Vue开发的是单页面应用(Single Page Application,SPA),不能使 ...
- Vue 2.0 + Vue Router + Vuex
用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node.js(包括了 npm).vue-cli 项目结构如图所示: ass ...
随机推荐
- linux下的tar命令详解
通过SSH访问服务器,难免会要用到压缩,解压缩,打包,解包等,这时候tar命令就是是必不可少的一个功能强大的工具.linux中最流行的tar是麻雀虽小,五脏俱全,功能强大. tar命令可以为linux ...
- （3）学习笔记 ） ASP.NET CORE微服务 Micro-Service ---- Consul服务治理
Consul是注册中心,服务提供者.服务提供者.服务消费者等都要注册到Consul中,这样就可以实现服务提供者.服务消费者的隔离. 除了Consul之外,还有Eureka.Zookeeper等类似软件 ...
- HTML 列表实例
41.无序列表本例演示无序列表.<h4>一个无序列表</h4><ul> <li>咖啡</li> <li>茶</li> ...
- Mysql的基本操作（一）增、删、改
创建/增加(create创建,alter字段操作,insert插入) 创建数据库 create database 数据库名称 charset=utf8; # 例: create database te ...
- LintCode——筛子求和
描述:扔n个骰子,向上面的数字之和为 S .给定 Given n,请列出所有可能的 S 值及其相应的概率. 样例:给定n=1,返回 [ [1, 0.17], [2, 0.17], [3, 0.17], ...
- C++ string 类详解
字符串是存储在内存的连续字节中的一系列字符.C++ 处理字符串的方式有两种,一种来自 C 语言,常被称为 C-风格字符串,另一种是基于 string 类库的字符串处理方式.C 风格字符串的处理可以参考 ...
- 理解以太坊的Layer 2扩容解决方案：状态通道（State Channels）、Plasma 和 Truebit
-宾夕法尼亚州的尼科尔森大桥建设照片(图源).罗马人的工程原理扩展至新的应用 对于以太坊来说,2018年是专注底层架构之年.今年很多早期参与者会测试网络极限,并且重新关注以太坊的扩容技术. 以太坊仍然 ...
- 浅介MVC与Backbone
1.MVC是什么东西? MVC (Modal View Controler) 是软件工程中的一种软件架构模式,把软件系统分为三个基本部分:模型(Model).视图(View)和控制器(Controll ...
- win7+opencv3.0.0+vs2010 安装及配置
最近看<学习opencv>,想要跑人脸识别的例子,于是先配环境吧. 1. opencv下载: 具体下载地址,http://opencv.org/,官网太慢,百度网盘的资源链接:http: ...
- 团队作业四-WBS练习
我们团队开发的是四则运算,主要面对的用户是小学生.老师及学生家长.经过我们组成员的讨论和结合实际及自身能力,对团队成员分配任务,队长负责全局工作主要负责任务,统一进度,和适量的编码,露哥和阮磊主要负责 ...