【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 ...
随机推荐
- nginx部署与安装
1.在学习ngnix的时候,免不了需要进行安装,安装其实很简单,一个shell脚本就可以搞定可以参考如下 使用root用户执行nginx-install.sh脚本即可,脚本如下: #!/bin/bas ...
- react-conponent-secondesElapsed
<!DOCTYPE html> <html> <head> <script src="../../build/react.js">& ...
- js-new、object.create、bind的模拟实现【转载备忘】
//创建Person构造函数,参数为name,age function Person(name,age){ this.name = name; this.age = age; } function _ ...
- @Tranactional 注解分析
Spring可以通过注解@Transactional来为业务逻辑层的方法(调用DAO完成持久化动作)添加事务能力,如下是@Transactional注解的定义 @Tranactional注解分析 作用 ...
- clipboard.js -- js实现将文本复制到剪贴板的方法
资源 推荐使用:clipboard.js 官方教程地址:https://clipboardjs.com/#example-text 官方github地址:https://github.com/zeno ...
- font-face在ie无法识别问题
font-face在ie的时候,需要其他格式eot,但是按照网上的设置无法识别,需要把原来的fotmat设置成format('eot');
- 微信小程序开发之初探
本文是以一个简单的小例子,来简要讲解微信小程序开发步骤,希望促进学习分享. 概念 微信小程序,简称小程序,缩写xcx,英文mini program.是一种不需要下载安装即可使用的应用,它实现了应用“触 ...
- C#字典Dictionay多线程读是否是安全的
答案:是线程安全的,只读不写多线程下,完全不需要加锁! 测试代码: using System; using System.Diagnostics; using System.Threading; us ...
- matlab练习程序(局部加权线性回归)
通常我们使用的最小二乘都需要预先设定一个模型,然后通过最小二乘方法解出模型的系数. 而大多数情况是我们是不知道这个模型的,比如这篇博客中z=ax^2+by^2+cxy+dx+ey+f 这样的模型. 局 ...
- UE4照片级渲染Demo