vue 路由(1)
路由的使用 (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)的更多相关文章
- Vue路由vue-router
前面的话 在Web开发中,路由是指根据URL分配到对应的处理程序.对于大多数单页面应用,都推荐使用官方支持的vue-router.Vue-router通过管理URL,实现URL和组件的对应,以及通过U ...
- 攻克vue路由
先下手 路由是个好功能,但是每次都感觉没法开始下手,愣愣的看半天官方文档,所以做个快速开始教程. 首先先搭好HTML文件结构: <!--link和view在一个父元素下--> <di ...
- Vue路由学习心得
GoodBoy and GoodGirl~进来了就看完点个赞再离开,写了这么多也不容易的~ 一.介绍 1.概念:路由其实就是指向的意思,当我们点击home按钮时,页面中就要显示home的内容,点击l ...
- VUE路由新页面打开的方法总结
平常做单页面的场景比较多,所以大部分的业务是在同一个页面进行跳转.要通过VUE路由使用新页面打开且传递参数,可以采用以下两个方法: 1.router-link的target <router-li ...
- vue路由参数变化刷新数据
当路由到某个组件时,由于组件会复用,所以生命周期函数不会再次执行, 如果这个组件是模板组件,靠传入不同数据来显示的.那么,可能会发生参数变化了但页面数据却不变化. 问题 假如有个组件 info.vue ...
- 10.3 Vue 路由系统
Vue 路由系统 简单示例 main.js import Vue from 'vue' import App from './App.vue' //https://router.vuejs.or ...
- vue路由原理剖析
单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面, 实现这一点主要是两种方式: 1.Hash: 通过改变hash值 2.History: 利用history对象新特性(详情可出门左拐见: ...
- 3种vue路由传参的基本模式
路由是连接各个页面的桥梁,而参数在其中扮演者异常重要的角色,在一定意义上,决定着两座桥梁是否能够连接成功. 在vue路由中,支持3中传参方式. 场景,点击父组件的li元素跳转到子组件中,并携带参数,便 ...
- 14.vue路由&脚手架
一.vue路由:https://router.vuejs.org/zh/ 1.定义 let router = new VueRouter({ mode:"history/hash" ...
- react router @4 和 vue路由 详解(八)vue路由守卫
完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 13.vue路由守卫 a.beforeEach 全局守卫 (每个路由调用前都会触发,根据 ...
随机推荐
- MongoDB --- 02. 基本操作,增删改查,数据类型,比较符,高级用法,pymongo
一.基本操作 . mongod 启动服务端 2. mongo 启动客户端 3. show databses 查看本地磁盘的数据库 4. use 库名 切换到要使用的数据库 5. db 查看当前使用的数 ...
- SQLAlchemy中解决数据库访问时出现的Incorrect string value: xxx at row 484
报错信息:Warning: (1366, "Incorrect string value: ‘\\xD6\\xD0\\xB9\\xFA\\xB1\\xEA...‘ for column ‘V ...
- video 自动循环播放
video 只加autoplay并不能自动播放,需要再加上muted <video controls="controls" autoplay loop muted> ...
- Charles手机抓包常见问题(各种常见坑)
坑1.安装好charles后,浏览器搜索会显示不是秘密连接.如果需要搜索东西,请关闭charles
- Django 管理站点
这一部分是关于 Django 的自动管理界面.这个特性是这样起作用的:它读取你模式中的元数据,然后提供给你一个强大而且可以使用的界面,网站管理者可以用它立即工作.在这里我们将讨论如何激活,使用和定制这 ...
- locate 和 find
因工作需求,需要查找到系统内是否有 密钥文件 id_rsa 或 id_dsa;想到两个工具find 和 locate find 可以对指定范围内的文件进行实时查找,但是 考虑到这种方法非常耗时. lo ...
- hdoj3247
注意fail时怎么走. #include <iostream> #include <cstdio> #include <cmath> #include <al ...
- android --- api json数据
「一个」.「Time 时光」.「开眼」.「一席」.「梨视频」.「微软必应词典」.「金山词典」.「豆瓣电影」.「中央天气」.「魅族天气」.「每日一文」.「12306」.「途牛」.「快递100」.「快递」 ...
- AEM上的一个图片转换工具
目的: 不同情况下,同样一张图片,需要不一样大小/背景/尺寸显示. 例子: dam下面有一张940 x 300 的图片: http://localhost:4502/content/dam/geome ...
- scikit_learn lasso详解
Lasso 回归 l1 正则化 The Lasso 是估计稀疏系数的线性模型. 它在一些情况下是有用的,因为它倾向于使用具有较少参数值的情况,有效地减少给定解决方案所依赖变量的数量. 因此,Lasso ...