vue-router 常用知识点一

这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。
注意：在 Vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用 this.$ router.push。
当你点击 <router-link> 时，这个方法会在内部调用，所以说，点击 <router-link :to="..."> 等同于调用 router.push(...)。

声明式	编程式
`<router-link :to="...">`	`router.push(...)`

参数：字符串或者对象
// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

注意：如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path：

const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

在 2.2.0+，可选的在 router.push 或 router.replace 中提供 onComplete 和 onAbort 回调作为第二个和第三个参数。这些回调将会在导航成功完成 (在所有的异步钩子被解析之后) 或终止 (导航到相同的路由、或在当前导航完成之前导航到另一个不同的路由) 的时候进行相应的调用。

注意：如果目的地和当前路由相同，只有参数发生了改变 (比如从一个用户资料到另一个 /users/1 -> /users/2)，你需要使用 beforeRouteUpdate 来响应这个变化 (比如抓取用户信息)。

#`router.replace(location, onComplete?, onAbort?)`

跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。

声明式	编程式
`<router-link :to="..." replace>`	`router.replace(...)`

#`router.go(n)`

这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)。

例子

// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)

// 后退一步记录，等同于 history.back()
router.go(-1)

// 前进 3 步记录
router.go(3)

// 如果 history 记录不够用，那就默默地失败呗
router.go(-100)
router.go(100)

router.push	router.replace	router.go
`window.history.pushState`	`window.history.replaceState`	`window.history.go`

Browser History APIs

参数传递

一、使用冒号（:）的形式传递参数或者说采用url传参

在路由文件里采用冒号的形式传参，这就是对参数的绑定

1，路由列表的参数设置

（1）路由列表的 path 是可以带参数的，我们在路由配置文件（router/index.js）里以冒号的形式设置参数。

（2）下面样例代码中，在跳转到欢迎页面（/hello）时，带有两个参数：id 和 userName。

| 

import Vue from 'vue'

import Router from 'vue-router'

import index from '@/components/index'  //引入首页组件

import hello from '@/components/hello'  //引入欢迎页组件

//Vue全局使用Router

Vue.use(Router)

export  default new Router({

routes: [ //配置路由，使用数组形式
{
path: '/',   //链接路径
name: 'index',  //路由名称
component: index  //映射的组件
},

{
path: '/hello/:id/:userName',
name: 'hello',
component: hello
}
]
})

2，参数的传递

（1）如果使用 <router-link> 组件跳转的话，可以这么携带参数：

<router-link to="/hello/123/hangge">跳转到 hello</router-link>

（2）如果使用 js 代码跳转的话，可以这么携带参数：

this.$router.push("/hello/123/hangge");

3，参数的获取

页面中通过 $route.params.xxx 获取传递过来的数据。

<template>
<div>
<h1>ID：{{ $route.params.id}}</h1>
<h1>用户名：{{ $route.params.userName}}</h1>
</div>
</template>

4，运行效果

可以看到点击首页链接进行跳转后，参数成功传递并显示。

（参数传递）

二、使用 query 方式传递参数

1，路由列表

query 方式类似 get 传参，即通过 URL 传递参数。而路由列表的 path 不需要配置参数：

import Vue from 'vue'
import Router from 'vue-router'
import index from '@/components/index'  //引入首页组件
import hello from '@/components/hello'  //引入欢迎页组件
 
//Vue全局使用Router
Vue.use(Router)
 
export default new Router({
  routes: [ //配置路由，使用数组形式
    {
      path: '/',   //链接路径
      name: 'index',  //路由名称
      component: index//映射的组件
    },
    {
      path: '/hello',
      name: 'hello',
      component: hello
    }
  ]
})

2，参数的传递

（1）如果使用 <router-link> 组件跳转的话，可以这么携带参数：

<router-link :to="{path:'/hello', query:{id:123, userName:'hangge'}}">
跳转到 hello
</router-link>

（2）如果使用 js 代码跳转的话，可以这么携带参数：

this.$router.push({`
path:'/hello',
query:{
id:123, 
userName:'hangge'
}
});

3，参数的获取

页面中通过 $route.query.xxx 获取传递过来的数据。

<template>
<div>
<h1>ID：{{ $route.query.id}}</h1>
<h1>用户名：{{ $route.query.userName}}</h1>
</div>
</template>

4，运行效果

可以看到点击首页链接进行跳转后，参数是自动拼接到 url 后面进行传递的。

（参数传递）

三、使用 params 方式传递参数

1，路由列表

params 方式类似于 post 传参，即传递的参数不会显示在 URL 上。同上面的 query 方式一样，路由列表的 path 不需要配置参数：
注意：如果路由上面不写参数，也是可以传过去的，但不会在url上面显示出你的参数，并且当你跳到别的页面或者刷新页面的时候参数会丢失，那依赖这个参数的http请求或者其他操作就会失败。

import Vue from 'vue'
import Router from 'vue-router'
import index from '@/components/index' //引入首页组件
import hello from '@/components/hello' //引入欢迎页组件

//Vue全局使用Router

Vue.use(Router)

export default new Router({

routes: [ //配置路由，使用数组形式

{
path: '/',   //链接路径
name: 'index',  //路由名称
component: index//映射的组件
},

{
path: '/hello',
name: 'hello',
component: hello
}
]
})

2，参数的传递

注意：params 只能用 name 来引入路由，而不能用 path。

（1）如果使用 <router-link> 组件跳转的话，可以这么携带参数：

<router-link :to="{name:'hello', params:{id:123, userName:'hangge'}}">
跳转到 hello
</router-link>

（2）如果使用 js 代码跳转的话，可以这么携带参数：

this.$router.push({
name:'hello',
params:{id:123, userName:'hangge'}
});

3，参数的获取

页面中通过 $route.params.xxx 获取传递过来的数据。

<template>
<div>
<h1>ID：{{ $route.params.id}}</h1>
<h1>用户名：{{ $route.params.userName}}</h1>
</div>
</template>

4，运行效果

可以看到这种方式，参数的传递不会拼接到 url 后面。

( 参数传递）

从上面的样例可以看出，当路由携带参数跳转时，页面这边通过 $route.params.xxx 或$ route.query.xxx 来获取传递过来的数据。但这样有个问题，由于组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。
要解决这个问题，我们可以使用 props 将组件和路由解耦。props 共有如下三种模式。

附使用 props将组件和路由解耦：

取代与 $route 的耦合

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})

通过 props 解耦

const User = {
  props: ['id'],
  template: '<div>User {{ id }}</div>'
}
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User, props: true },

    // 对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项：
    {
      path: '/user/:id',
      components: { default: User, sidebar: Sidebar },
      props: { default: true, sidebar: false }
    }
  ]
})

这样你便可以在任何地方使用该组件，使得该组件更易于重用和测试。

#布尔模式

（1）如果 props 被设置为 true，route.params 将会被设置为组件属性。

export default new Router({

routes: [ //配置路由，使用数组形式
{
path: '/', //链接路径
name: 'index',  //路由名称
component: index  //映射的组件
},
{
path: '/hello/:id/:userName',
name: 'hello',
component: hello,
props: true
}
]

})

（2）然后我们页面组件这边不再需要通过 $route.params.xxx 或$ route.query.xxx 来获取传递过来的数据。

<template>
<div>
<h1>ID：{{ id }}</h1>
<h1>用户名：{{ userName}}</h1>
</div>
</template>
<script>
export default {
name: 'hello',
props: ['id', 'userName']
}
</script>

#对象模式

如果 props 是一个对象，它会被按原样设置为组件属性。当 props 是静态的时候有用。

const router = new VueRouter({
  routes: [
    { path: '/promotion/from-newsletter', component: Promotion, props: { newsletterPopup: false } }
  ]
})
或
export default new Router({

routes: [ //配置路由，使用数组形式
{
path: '/', //链接路径
name: 'index',  //路由名称
component: index  //映射的组件
},
{
path: '/hello/:id/:userName',
name: 'hello',
component: hello,
props: {
id: 1234,
userName: "hangge"
}
}
]

（2）然后页面组件这边获取数据方式和前面一样。

<template>
<div>
<h1>ID：{{ id }}</h1>
<h1>用户名：{{ userName}}</h1>
</div>
</template>
<script>
export default {
name: 'hello',
props: ['id', 'userName']
}
</script>

#函数模式

你可以创建一个函数返回 props。在函数中对参数值进行处理。这样你便可以将参数转换成另一种类型，将静态值与基于路由的值结合等等。

const router = new VueRouter({
  routes: [
    { path: '/search', component: SearchUser, props: (route) => ({ query: route.query.q }) }
  ]
})
---------------------------
function dynamicPropsFunc (route) {
  return {
    message: "欢迎您："+ route.params.userName
  }
}
const router = new VueRouter({
  routes: [
    { path: '/search', component: SearchUser, props: dynamicPropsFunc }
  ]
})

（2）这里假设我们使用 JS 进行跳转，代码如下：

this.$router.push({
name:'hello',
params:{id:123, userName:'hangge'}
});

（3）目标页面组件代码，以及运行结果如下：

（参数传递）

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>
 
<script>
  export default {
    name: 'hello',
    props: ['message']
  }
</script>

URL /search?q=vue 会将 {query: 'vue'} 作为属性传递给 SearchUser 组件。

请尽可能保持 props 函数为无状态的，因为它只会在路由发生变化时起作用。如果你需要状态来定义 props，请使用包装组件，这样 Vue 才可以对状态变化做出反应。
例子https://github.com/vuejs/vue-router/blob/dev/examples/route-props/app.js

最后编辑于：2019.02.19 09:27:40

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 206,214评论 6赞 481
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 88,307评论 2赞 382
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 152,543评论 0赞 341
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 55,221评论 1赞 279
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 64,224评论 5赞 371
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,007评论 1赞 284
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,313评论 3赞 399
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,956评论 0赞 259
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 43,441评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,925评论 2赞 323
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,018评论 1赞 333
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,685评论 4赞 322
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,234评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,240评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,464评论 1赞 261
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,467评论 2赞 352
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,762评论 2赞 345

vue-router 常用知识点一

vue-router 常用知识点一

目录

- 1.vue-router响应路由参数的变化

- 2.vue-router如何定义嵌套路由？

- 3.vue-router的几种实例方法以及参数传递

- 1. vue-router响应路由参数的变化

- 2.vue-router如何定义嵌套路由？

路由嵌套总结

- 3.vue-router的几种实例方法以及参数传递

#`router.replace(location, onComplete?, onAbort?)`

#`router.go(n)`

一、使用冒号（:）的形式传递参数或者说采用url传参

1，路由列表的参数设置

2，参数的传递

3，参数的获取

4，运行效果

二、使用 query 方式传递参数

1，路由列表

2，参数的传递

3，参数的获取

4，运行效果

三、使用 params 方式传递参数

1，路由列表

2，参数的传递

3，参数的获取

4，运行效果

附使用 props将组件和路由解耦：

#布尔模式

#对象模式

#函数模式

推荐阅读更多精彩内容

vue-router 常用知识点一

目录

- 1.vue-router响应 路由参数 的变化

- 2.vue-router如何定义嵌套路由？

- 3.vue-router的几种实例方法以及参数传递

- 1. vue-router响应 路由参数 的变化

- 2.vue-router如何定义嵌套路由？

路由嵌套总结

- 3.vue-router的几种实例方法以及参数传递

#router.replace(location, onComplete?, onAbort?)

#router.go(n)

一、使用冒号（:）的形式传递参数 或者说 采用url传参

1，路由列表的参数设置

2，参数的传递

3，参数的获取

4，运行效果

二、使用 query 方式传递参数

1，路由列表

2，参数的传递

3，参数的获取

4，运行效果

三、使用 params 方式传递参数

1，路由列表

2，参数的传递

3，参数的获取

4，运行效果

附使用 props将组件和路由解耦：

#布尔模式

#对象模式

#函数模式

推荐阅读更多精彩内容

- 1.vue-router响应路由参数的变化

- 1. vue-router响应路由参数的变化

#`router.replace(location, onComplete?, onAbort?)`

#`router.go(n)`

一、使用冒号（:）的形式传递参数或者说采用url传参