【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 ...
随机推荐
- jquery对象和DOM对象的相互转换详解
jquery对象和DOM对象的相互转换 在讨论jquery对象和DOM对象的相互转换之前,先约定好定义变量的风格如果获取的是jquery对象,那么在变量前面加上$,例如 var $varible = ...
- BZOJ2783: [JLOI2012]树(树上前缀和+set)
Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 1215 Solved: 768[Submit][Status][Discuss] Descriptio ...
- 2018-09-24 Java源码英翻中网页演示
在线演示地址: 源代码翻译 两部分如下. 独立的Java代码翻译库 续前文代码翻译尝试-使用Roaster解析和生成Java源码 源码库: program-in-chinese/java_code_t ...
- java 不使用paint方法进行画图
private Graphics2D g; g = (Graphics2D) getGraphics();
- Kotlin入门(25)共享参数模板
共享参数SharedPreferences是Android最简单的数据存储方式,常用于存取“Key-Value”键值对数据.在使用共享参数之前,要先调用getSharedPreferences方法声明 ...
- (后端)Mybatis实现批量删除操作(转)
原文地址:https://blog.csdn.net/javaee_sunny/article/details/52511842 一. 这里主要考虑两种参数类型:数组或者集合. 而这点区别主要体现在E ...
- 关于js脚本宿主对脚本代码的绑定
脚本代码绑定,Unity3D是这样做的.为了体现Unity3D的基于对象设计,Unity3D可以为每个对象绑定多个脚本文件,可以是js,可以是cs,也可以是boo. threejs/editor也有与 ...
- LNMP + Apache 架构配置
从事前端开发已3年有余,越来越发现前端开发要学习的知识已不仅仅是html+css+js那么简单了,2017年市场上就有了大前端的概念,可以说对前端工程师的要求也越来越高了,从招聘的要求中可以看到熟悉一 ...
- ORA-1652: unable to extend temp segment by 128 in tablespace xxx Troubleshootin
当收到告警信息ORA-01652: unable to extend temp segment by 128 in tablespace xxxx 时,如何Troubleshooting ORA-16 ...
- 转自:stuff字符串拼接方法
下文讲述数据表中将多列合并到一列的方法分享 转自:http://www.maomao365.com/?p=6796