html:

 <router-link to="test">Go to Foo</router-link>
<router-link to="test1">Go to Foo1</router-link>
<router-view></router-view>//切换的视图容器

  js:

 var app = new Vue({
el: "#app",
data: {},
router:new VueRouter({
routes:[{
path:"/test",
component:{
template:"<p>111111111</p>"
}
},
{
path:"/test1",
component:{
template:"<p>22222222</p>"
}
}]
}),
})

Vue router link的更多相关文章

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

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

  2. Vue Study [2]: Vue Router

    Description The article for vue router. Original post link:https://www.cnblogs.com/markjiang7m2/p/10 ...

  3. Vue Router 路由守卫:完整的导航解析流程

    完整的导航解析流程 1 导航被触发. 2 在失活的组件里调用离开守卫. 3 调用全局的 beforeEach 守卫. 4 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+). ...

  4. 「进阶篇」Vue Router 核心原理解析

    前言 此篇为进阶篇,希望读者有 Vue.js,Vue Router 的使用经验,并对 Vue.js 核心原理有简单了解: 不会大篇幅手撕源码,会贴最核心的源码,对应的官方仓库源码地址会放到超上,可以配 ...

  5. Vue 2.0 + Vue Router + Vuex

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

  6. vue router 只需要这么几步

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  7. Vue.js 2.x笔记:路由Vue Router(6)

    1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...

  8. Vue Router学习笔记

    前端的路由:一个地址对应一个组件 Vue Router中文文档 一.路由基本使用 第1步:导入Vue Router: <script src="https://unpkg.com/vu ...

  9. vue router.push(),router.replace(),router.go()和router.replace后需要返回两次的问题

    转载:https://www.cnblogs.com/lwwen/p/7245083.html https://blog.csdn.net/qq_15385627/article/details/83 ...

随机推荐

  1. Nginx在线服务状态下平滑升级或新增模块

    nginx在使用过程中,有时需要在不影响当前业务的情况下,进行升级或新增模块.nginx的升级有两种方法:1.半自动化升级:2.手动升级 不过都需要先查看安装的nginx版本和配置信息,然后前往官网下 ...

  2. Mysql常见索引介绍

    索引是一种特殊的文件,包含了对数据表中所有记录的引用指针.InnoDB引擎的数据库,其上的索引是表空间的一个组成部分. (1).索引的优缺点 优点:加快搜索速度,减少查询时间 缺点:索引是以文件的形式 ...

  3. 启后台JOB处理单据遇到锁定问题

    /用户XXX已经处理采购凭证 9000036590 DN过账失败:/已冻结临时过账:用户 XXX已冻结编号范围 /用户XXX已经处理采购凭证 9000036589   ???问题:怎么检查采购订单正在 ...

  4. 关于cookies、sessionStorage和localStorage解释及区别

    在浏览器查看 HTML4的本地存储 cookie 浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式,可以利用cookie,session等跟服务端进行数据交互. 一.cookie和sessio ...

  5. JS选中和取消选中checkbox

    document.getElementsByTagName("input")[0].checked = 0;//不选择 document.getElementsByTagName( ...

  6. Spark简介 --大数据

    一.Spark是什么? 快速且通用的集群计算平台 二.Spark的特点: 快速:Spark扩充流行的Mapreduce计算模型,是基于内存的计算 通用:Spark的设计容纳了其它分布式系统拥有的功能, ...

  7. 如何使用js实现轮播图

    <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...

  8. rsyslog服务日志报错分析1

    客户问题: 最近对服务器进行日志检查时,发现部分主机的rsyslog服务状态有报错,报错详情如下 排查过程: 1.从报错截图来看,报错主要发生在文件'/usr/lib64/rsyslog/omazur ...

  9. [转帖]彻底弄懂UTF-8、Unicode、宽字符、locale

    彻底弄懂UTF-8.Unicode.宽字符.locale linux后端开发   已关注   彻底弄懂UTF-.Unicode.宽字符.locale unicode 是字符集 utf-8是编码格式.. ...

  10. Python split()方法分割字符串

    Python 中,除了可以使用一些内建函数获取字符串的相关信息外(例如 len() 函数获取字符串长度),字符串类型本身也拥有一些方法供我们使用. 注意,这里所说的方法,指的是字符串类型 str 本身 ...