路由的使用  (5步)

1.首先安装路由  npm install  vue-router
2.引入 vue-router

import VueRouter from 'vue-router'

3.使用router

Vue.use(VueRouter )

创建实例

const router = new VueRouter({

routers

(routers:routers) //注意属性必须是routers

})

const router = new VueRouter({

   routers:[
{
path:'/apple',
component:Apple
},
{
path:'/banbana',
component:Banana
}
]
})

在组件中使用

<view-router   to="{name:'apple'}">to apple</view-router>

<view-router  to="{name:'banana'}>to banana</view-router>

全局使用router

const app = new Vue({

router}).$mount('app')

2.我们可以访问它this.$router以及this.$route任何组件内部的当前路由:

路由参数 /apple/:color

获取参数

this.$router.params

传给子路由

props: route => ({ id: route.query.id })

子路由的获取直接props:['id']

3.动态路由匹配

/user/:id

匹配  /user/foo    /user/bar

因为会匹配到相同的组件,所以不会重新调用生命钩子,如果监听变化的话

捕获所有的404未找到路线

{path:'*'

component:404组件

}

路由的匹配优先级是,路由定义的越早,优先级越高

vue 路由(1)的更多相关文章

  1. Vue路由vue-router

    前面的话 在Web开发中,路由是指根据URL分配到对应的处理程序.对于大多数单页面应用,都推荐使用官方支持的vue-router.Vue-router通过管理URL,实现URL和组件的对应,以及通过U ...

  2. 攻克vue路由

    先下手 路由是个好功能,但是每次都感觉没法开始下手,愣愣的看半天官方文档,所以做个快速开始教程. 首先先搭好HTML文件结构: <!--link和view在一个父元素下--> <di ...

  3. Vue路由学习心得

    GoodBoy and GoodGirl~进来了就看完点个赞再离开,写了这么多也不容易的~ 一.介绍  1.概念:路由其实就是指向的意思,当我们点击home按钮时,页面中就要显示home的内容,点击l ...

  4. VUE路由新页面打开的方法总结

    平常做单页面的场景比较多,所以大部分的业务是在同一个页面进行跳转.要通过VUE路由使用新页面打开且传递参数,可以采用以下两个方法: 1.router-link的target <router-li ...

  5. vue路由参数变化刷新数据

    当路由到某个组件时,由于组件会复用,所以生命周期函数不会再次执行, 如果这个组件是模板组件,靠传入不同数据来显示的.那么,可能会发生参数变化了但页面数据却不变化. 问题 假如有个组件 info.vue ...

  6. 10.3 Vue 路由系统

     Vue 路由系统  简单示例 main.js  import Vue from 'vue' import App from './App.vue' //https://router.vuejs.or ...

  7. vue路由原理剖析

    单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面, 实现这一点主要是两种方式: 1.Hash: 通过改变hash值 2.History: 利用history对象新特性(详情可出门左拐见:  ...

  8. 3种vue路由传参的基本模式

    路由是连接各个页面的桥梁,而参数在其中扮演者异常重要的角色,在一定意义上,决定着两座桥梁是否能够连接成功. 在vue路由中,支持3中传参方式. 场景,点击父组件的li元素跳转到子组件中,并携带参数,便 ...

  9. 14.vue路由&脚手架

    一.vue路由:https://router.vuejs.org/zh/ 1.定义 let router = new VueRouter({ mode:"history/hash" ...

  10. react router @4 和 vue路由 详解(八)vue路由守卫

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 13.vue路由守卫 a.beforeEach 全局守卫 (每个路由调用前都会触发,根据 ...

随机推荐

  1. MongoDB --- 02. 基本操作,增删改查,数据类型,比较符,高级用法,pymongo

    一.基本操作 . mongod 启动服务端 2. mongo 启动客户端 3. show databses 查看本地磁盘的数据库 4. use 库名 切换到要使用的数据库 5. db 查看当前使用的数 ...

  2. SQLAlchemy中解决数据库访问时出现的Incorrect string value: xxx at row 484

    报错信息:Warning: (1366, "Incorrect string value: ‘\\xD6\\xD0\\xB9\\xFA\\xB1\\xEA...‘ for column ‘V ...

  3. video 自动循环播放

    video 只加autoplay并不能自动播放,需要再加上muted   <video controls="controls" autoplay loop muted> ...

  4. Charles手机抓包常见问题(各种常见坑)

    坑1.安装好charles后,浏览器搜索会显示不是秘密连接.如果需要搜索东西,请关闭charles

  5. Django 管理站点

    这一部分是关于 Django 的自动管理界面.这个特性是这样起作用的:它读取你模式中的元数据,然后提供给你一个强大而且可以使用的界面,网站管理者可以用它立即工作.在这里我们将讨论如何激活,使用和定制这 ...

  6. locate 和 find

    因工作需求,需要查找到系统内是否有 密钥文件 id_rsa 或 id_dsa;想到两个工具find 和 locate find 可以对指定范围内的文件进行实时查找,但是 考虑到这种方法非常耗时. lo ...

  7. hdoj3247

    注意fail时怎么走. #include <iostream> #include <cstdio> #include <cmath> #include <al ...

  8. android --- api json数据

    「一个」.「Time 时光」.「开眼」.「一席」.「梨视频」.「微软必应词典」.「金山词典」.「豆瓣电影」.「中央天气」.「魅族天气」.「每日一文」.「12306」.「途牛」.「快递100」.「快递」 ...

  9. AEM上的一个图片转换工具

    目的: 不同情况下,同样一张图片,需要不一样大小/背景/尺寸显示. 例子: dam下面有一张940 x 300 的图片: http://localhost:4502/content/dam/geome ...

  10. scikit_learn lasso详解

    Lasso 回归 l1 正则化 The Lasso 是估计稀疏系数的线性模型. 它在一些情况下是有用的,因为它倾向于使用具有较少参数值的情况,有效地减少给定解决方案所依赖变量的数量. 因此,Lasso ...