【vue】vue-router的用法
依赖安装:(c)npm install vue-router
过程:
常用方法:
1.页面跳转方式:
htm中使用的方式:
①不带参数写法:
<router-link to="home">点我</router-link>
<router-link v-bind:to="'home'">点我</router-link>
<router-link :to="'home'">Home</router-link>
<router-link :to="{ path: 'home' }">Home</router-link>
② 带参数写法:
A: <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
批注:路由配置格式:
{ path: '/user/:userId', name: 'user', component: User }
导航显示:/user/123
B: <router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>
批注:带查询参数
导航显示:/register?plan=private
js中使用的方式:
① this.$router.push('xxx') //字符串,这里的字符串是路径path匹配噢,不是router配置里的name
② this.$router.push({ path: 'home' }) //对象
③ this.$router.push({ name: 'user', params: { userId: 123 }}) //
命名的路由 这里会变成 /user/123
④ this.$router.push({ path: 'register', query: { plan: 'private' }})
// 带查询参数,变成 /register?plan=private
2.获取路由相关参数:
① ‘http://localhost:8080/linkParamsQuestion?age=18’
let age = this.$route.query.age; //问号后面参数会被封装进 this.$route.query;
② 'http://localhost:8080/linkParamsQuestion/user/evan/post/123’
注:user/:username/post/:post_id(这种配置方式)
let name = this.$route.params.name; // 链接里的name被封装进了 this.$route.params
3.检测路由
watch:{
'$route': function (to,from) {
// 对路由变化作出响应...
}
}
或者
watch: {
"$route": "routeChange",
}, methods: {
routeChange(){
console.log(this.$route.path);
} }
4.router属性
属性 | 说明 |
---|---|
$route.path | 当前路由对象的路径,如'/view/a' |
$rotue.params | 关于动态片段(如/user/:username )的键值对信息,如{username: 'paolino'} |
$route.query | 请求参数,如/foo?user=1 获取到query.user = 1 |
$route.router | 所属路由器以及所属组件信息 |
$route.matched | 数组,包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。 |
$route.name | 当前路径名字 |
$router.matched
属性,它是一个包含性的匹配,它会将嵌套它的父路由都匹配出来。
例如,/home/news/detail/:id
这条路径,它包含3条匹配的路由:
- /home/news/detail/:id
- /home/news
- /home
5.在 router-view上加上一个唯一的key,来保证路由切换时都会重新渲染触发钩子了
<router-view :key="key"></router-view> computed: {
key() {
return this.$route.name !== undefined? this.$route.name + +new Date(): this.$route + +new Date()
}
}
6.路由元信息meta字段
未完待续。。。。
7.非必传参数路由配置
应用:
this.$router.push({ path: 'member', query: { type: 1 }})
错误配置:
{
path: 'member/:type',
hidden: false,
component: resolve => require(['@/views/modules/main/delMan.vue'], resolve),//懒加载,
name: 'tag/index/member',
meta: { _menuName: '删除'}
},
效果:http://v.study.com/#/error/404?type=1
正确配置:
{
path: 'member',
hidden: false,
component: resolve => require(['@/views/modules/main/delMan.vue'], resolve),//懒加载,
name: 'tag/index/member',
meta: { _menuName: '删除'}
},
效果
http://v.study.com/#/test/member?type=1
相关资料:https://segmentfault.com/a/1190000009651628
https://router.vuejs.org/zh-cn/essentials/getting-started.html
https://www.cnblogs.com/Leo_wl/p/5702350.html
https://router.vuejs.org/zh-cn/essentials/nested-routes.html
作者:smile.轉角
QQ:493177502
【vue】vue-router的用法的更多相关文章
- vue中的一些用法,持续更新中......
1.跳转用法 @1.在template模板中通常使用router-link to='url' @2.在js中 1.this.$router.push({path: ''/order/index''}) ...
- 三、vue之router
三.vue之router 此时vue的脚手架.创建项目已经完成. ... vue的运行流程 index.html-->main.js-->App.vue-->router/index ...
- Vue中router两种传参方式
Vue中router两种传参方式 1.Vue中router使用query传参 相关Html: <!DOCTYPE html> <html lang="en"> ...
- Vue中directives的用法
关于 vue 中 directives 的用法问题,详细可以参考vue官方对directives的解释 当前文章主要讲述directives怎么用,directives做权限按钮的功能 ###1. d ...
- Vue中mixin的用法
在项目中我们经常会遇到多个组件调用同一个方法的问题,为了避免每次都在.vue文件中定义并调用,我们可采用vue的mixin的用法: 具体使用如下: 我们需要在main.js中引入mixins文件夹下的 ...
- 四 Vue学习 router学习
index.js: 按需加载组件: const login = r => require.ensure([], () => r(require('@/page/login')), 'log ...
- Vue插件编写、用法详解(附demo)
Vue插件编写.用法详解(附demo) 1.概述 简单来说,插件就是指对Vue的功能的增强或补充. 比如说,让你在每个单页面的组件里,都可以调用某个方法,或者共享使用某个变量,或者在某个方法之前执行一 ...
- Vue中基本指令用法
指令在Vue中是个很重要的功能,在Vue项目中是必不可少的.根据官网的介绍,指令 (Directives) 是带有 v- 前缀的特殊属性.指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地 ...
- vue 中router.go;router.push和router.replace的区别
vue 中router.go:router.push和router.replace的区别:https://blog.csdn.net/div_ma/article/details/79467165 t ...
随机推荐
- idea使用svn出现问题解决办法
idea一直在refreshing vcs history:解决办法: 有些模块中的版本信息是错的,如拷贝过来的代码,其远程仓库是不存在的, 因此要删除这些模块中的.svn文件夹 ...
- 带你使用JS-SDK自定义微信分享效果
前言 想必各位在写wap端时都遇到过这样的场景吧 ----自定义分享标题.图片.描述 接下来小编给大家讲解下分享相关操作 预期效果 原始的分享效果: 使用微信JS-SDK的分享效果: 可以看出缩略图, ...
- 5; XHTML图像
1.背景图案的设置 2.将图片插入到网页中去 3.用图像作为超链接 4.使用工具建立地图索引 5.切片索引 6.为网站添加图标 5.1 背景图案的设置 格式:<body background=” ...
- 《JavaScript高级程序设计》笔记:引用类型(五)
Object类型 创建object实例方法有两种.第一种方法使用new操作符后跟object构造函数.如下: var person=new Object(); person.name="Ni ...
- javascript的介绍、javascirpt的存在形式、javascript注释
本文内容: javascript的介绍 javascirpt的存在形式 javascript注释 javascript的介绍: javascript是一种解释性脚本语言 它的用途是给html网页增加动 ...
- Keras深度学习框架安装及快速入门
1.下载安装Keras 如果你是安装的Anaconda组合套件,可以直接在Prompt上执行安装命令:pip install keras 注意:最下面为Successfully...表示安装成功! 2 ...
- 单纯linux系统下hadoop2.7.3 eclipse,记一次成功的运行wordcount的注意事项
hadoop要正确安装好 hadoop eclipse plugin要对应相应的eclipse版本 define hadoop location mr master:9000 另一个9001 下面的 ...
- 探索SQL Server元数据(三):索引元数据
背景 在第一篇中我介绍了如何访问元数据,元数据为什么在数据库里面,以及如何使用元数据.介绍了如何查出各种数据库对象的在数据库里面的名字.第二篇,我选择了触发器的主题,因为它是一个能提供很好例子的数据库 ...
- element-ui 2.4.8 BUG 标签页的最后一个Tab标题没法移除,更新后发现最新版本不存在该问题了 记录下
- VMware虚拟机安装CentOS7【转】-添加部分注释(自己看着方便)
本文稍作改动,添加部分说明,原文链接:https://www.cnblogs.com/wcwen1990/p/7630545.html 本文基于vmware workstations进行CentOS7 ...