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 路由 以及默认路由跳转的更多相关文章

  1. WebApi-2 自定义路由与默认路由

    向Web API添加路由 public static void Register(HttpConfiguration config) { //// Web API 配置和服务 //// 将 Web A ...

  2. Vue中的路由 以及默认路由跳转

    https://router.vuejs.org/ vue路由配置: 1.安装 npm install vue-router --save / cnpm install vue-router --sa ...

  3. 在ensp上静态路由以及默认路由基本配置

    原理 实验模拟 实验拓扑 实验参数 测试连通性 两台PCping一下,发现超时 为什么呢我们可以看一下这个路由表,发现没有网段为20的信息,所以我们要加上 加入当访问地址为20网段时,设置下一跳路由器 ...

  4. IT菜鸟之路由器基础配置(静态、动态、默认路由)

    路由器:连接不同网段的设备 企业级路由和家用级路由的区别: 待机数量不同(待机量) 待机量:同时接通的终端设备的数量 待机量的值越高,路由的性能越好 别墅级路由,表示信号好,和性能无关 交换机:背板带 ...

  5. CCNP路由实验之八 路由重公布

     CCNP路由实验之八 路由重公布 在前面几个实验,已经学习了静态路由和动态路由.如今,我们要掌握怎样使它们在一个网络中融合,即路由重公布. 使用出站口作为静态路由 0 使用下一跳地址作为静态路由 ...

  6. IP路由__静态路由

    1.静态路由的优缺点: 优点:对于路由器的CPU没有管理性开销,它意味着如果你不使用动态路由选择的话,你可能应该购买更为便宜的路由器.在路由器之间没有带宽占用,它意味着在WAN链接中你可以节省更多的钱 ...

  7. 华为eNSP路由交换-静态路由

    静态路由 一. 静态路由及默认路由基本配置 1.1实验内容 在由三台路由器所组成的简单网络中,R1和R3各连着一台PC,现在要求能够实现PC-1和PC-2之间的通信.本实验将通过配置基本的静态路由和默 ...

  8. 每天一点点之vue框架开发 - vue-router路由进阶(路由别名、跳转、默认路由、二级路由、路由守卫)

    路由别名   在main.js中的路由中添加name来创建别名 const routes = [ {path:'/footer',name:footerLink,component:Footer} ] ...

  9. 057——VUE中vue-router之路由参数默认值的设置

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

随机推荐

  1. 写一个小程序实现win系统定时锁屏

    貌似很久没写程序了,随便用C语言实现吧 #include<stdio.h> #include<stdlib.h> int main(){ system("rundll ...

  2. 简单webpack plugin 开发

    重要是学习下怎么开发webpack plugin,同时记录下 插件模型 webpack 是一个插件,可以是javascript class ,或者具名 class 定义apply 方法 指定一个绑定到 ...

  3. HI3516EV100 RTMP添加音频

    1.先试试只发音频 失败 2.保存音频,发送视频,成功

  4. 关于meshgrid和numpy.c_以及numpy.r_

    meshgrid的目的是生成两套行列数一致的矩阵,其中一个是行重复,一个是列复制:可以这么来理解,通过ravel()将矩阵数据拉平之后,就可以将这两套矩阵累加在一起,形成一个两行数据,要达到这个效果是 ...

  5. deque/defaultdict/orderedict/collections.namedtuple()/collections.ChainMap() 笔记

    关于deque的使用 collections.deque([list[, max_length]]) # 不限定长度,可随意添加没有上限 >>> from collections i ...

  6. 【java】类的初识

    面向过程思想:强调的是功能行为 面向对象思想:不自己亲自做,将功能封装为对象,强调具备功能的对象,指挥对象实现各种功能.以后开发实际就是找对象使用对象,要是对象没有就创建对象并维护对象. 面向对象的三 ...

  7. String的疑问

    ss[]//var ss:String; 和 Pointer(ss)^ 是不是一个意思呢? 答:不是. ss[]表示第一个字符.如:ss:='abc' 则表示]=Length(ss); Pointer ...

  8. Hiero中修改BinView中binitem对象名字的方法

    之前博客提到了scan for more version这样一个功能,该功能会放宽查询条件,这就会导致BinItem的名称与activeVersion的名称不符.这篇博客提供了一个方法去统一名称. 该 ...

  9. 坑人的 Javascript 模块化编程 sea.js

    坑人的 Javascript 模块化编程 sea.js 忧伤 加 蛋疼的 开始了 看文档 Sea.js 进行配置 seajs.config({ // 设置路径,方便跨目录调用 paths: { 'ar ...

  10. php函数总结2

    1.匿名参数 func_get_args //获取参数列表的数组 func_get_arg(num) //数组索引 func_num_args() //获取匿名函数的个数 <?php funct ...