vue 路由 以及默认路由跳转
https://router.vuejs.org/
vue路由配置:
1.安装
npm install vue-router --save / cnpm install vue-router --save
2、引入并 Vue.use(VueRouter) (main.js)
import VueRouter from 'vue-router'
Vue.use(VueRouter)
3、配置路由
1、创建组件 引入组件
2、定义路由 (建议复制s)
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar },
{ path: '*', redirect: '/home' } /*默认跳转路由*/
]
3、实例化VueRouter
const router = new VueRouter({
routes // (缩写)相当于 routes: routes
})
4、挂载
new Vue({
el: '#app',
router,
render: h => h(App)
})
5 、根组件的模板里面放上这句话 <router-view></router-view>
6、路由跳转
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
vue 路由 以及默认路由跳转的更多相关文章
- WebApi-2 自定义路由与默认路由
向Web API添加路由 public static void Register(HttpConfiguration config) { //// Web API 配置和服务 //// 将 Web A ...
- Vue中的路由 以及默认路由跳转
https://router.vuejs.org/ vue路由配置: 1.安装 npm install vue-router --save / cnpm install vue-router --sa ...
- 在ensp上静态路由以及默认路由基本配置
原理 实验模拟 实验拓扑 实验参数 测试连通性 两台PCping一下,发现超时 为什么呢我们可以看一下这个路由表,发现没有网段为20的信息,所以我们要加上 加入当访问地址为20网段时,设置下一跳路由器 ...
- IT菜鸟之路由器基础配置(静态、动态、默认路由)
路由器:连接不同网段的设备 企业级路由和家用级路由的区别: 待机数量不同(待机量) 待机量:同时接通的终端设备的数量 待机量的值越高,路由的性能越好 别墅级路由,表示信号好,和性能无关 交换机:背板带 ...
- CCNP路由实验之八 路由重公布
CCNP路由实验之八 路由重公布 在前面几个实验,已经学习了静态路由和动态路由.如今,我们要掌握怎样使它们在一个网络中融合,即路由重公布. 使用出站口作为静态路由 0 使用下一跳地址作为静态路由 ...
- IP路由__静态路由
1.静态路由的优缺点: 优点:对于路由器的CPU没有管理性开销,它意味着如果你不使用动态路由选择的话,你可能应该购买更为便宜的路由器.在路由器之间没有带宽占用,它意味着在WAN链接中你可以节省更多的钱 ...
- 华为eNSP路由交换-静态路由
静态路由 一. 静态路由及默认路由基本配置 1.1实验内容 在由三台路由器所组成的简单网络中,R1和R3各连着一台PC,现在要求能够实现PC-1和PC-2之间的通信.本实验将通过配置基本的静态路由和默 ...
- 每天一点点之vue框架开发 - vue-router路由进阶(路由别名、跳转、默认路由、二级路由、路由守卫)
路由别名 在main.js中的路由中添加name来创建别名 const routes = [ {path:'/footer',name:footerLink,component:Footer} ] ...
- 057——VUE中vue-router之路由参数默认值的设置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- IntelliJ IDEA备忘
IntelliJ IDEA生成get/set方法的快捷键 IntelliJ IDEA生成get/set有2种方式,alt+enter.alt+insert.下面分别介绍这2种方式快速生成get与set ...
- csvn使用入门
在前面我们已经配置好了csvn服务器,直达链接http://blog.csdn.net/qq_34829953/article/details/78285647 现在我们在win10环境下使用我们搭建 ...
- 算法(第4版) (Robert Sedgewick / Kevin Wayne 著)
第1章 基础 第2章 排序 第3章 查找 第4章 图 第5章 字符串 第1章 基础 public class Bag<T> : IEnumerable<T> { ]; ; pu ...
- 如何让你的 KiCad 在缩放时不眩晕?
如何让你的 KiCad 在缩放时不眩晕? 使用 KiCAD 第一感觉是打开速度非常快,而且 PCB 拉线也非常快,封装库又多. 但有一个问题,缩放时总给人一种眩晕,原来是因为鼠标自动跑到屏幕中间去了, ...
- Oracle 增加、修改、删除字段
分别对T_USER表 进行增加name字段, 修改name字段,删除name字段 /*增加列表*/ ALTER TABLE T_USERS ADD name varchar2(512) ; /*删除列 ...
- split与re.split/捕获分组和非捕获分组/startswith和endswith和fnmatch/finditer 笔记
split()对字符串进行划分: >>> a = 'a b c d' >>> a.split(' ') ['a', 'b', 'c', 'd'] 复杂一些可以使用r ...
- Go RPC返回值
Go 语言RPC定义格式如下: func (t T) MethodName(argType T1, replyType T2) error 第一个参数是接收的参数,第二个参数是返回给客户端的参数,第二 ...
- Spring Cloud Eureka 服务治理
Spring Cloud Eureka 是 Spring Cloud Netflix 微服务套件的一部分,基于 Netflix Eureka 做了二次封装,主要负责完成微服务架构中的服务治理功能,服务 ...
- js switch 函数类型 序列化 转义
switch(name){ case '1': age = 123; break; case '2': age = 456; break; default : age = 777; } 函数 func ...
- php 测试 程序执行时间,内存使用情况
memory_get_usage 可以分析内存占用空间. microtime 函数就可以分析程序执行时间. 上栗子: echo '开始内存:'.memory_get_usage(), ''; $tmp ...