router route

第一：控制台输出

router的输出中mode属性，history属性是我们比较熟悉的

route的输出中都是我们平常可以用到的属性’

第二：注入的属性（区别）

通过在 Vue 根实例的 router 配置传入 router 实例，下面这些属性成员会被注入到每个子组件。

（1）this.$router

router 实例。

（2）this.$route

当前激活的路由信息对象。这个属性是只读的，里面的属性是 immutable (不可变) 的，不过你可以 watch (监测变化) 它。

第三：详细介绍router的常用用法：

（1）router实现路由跳转的两种方式，声明式、编程式（两个实现的功能是一样的，只是一个是写在html模板中，一个是写在jsvascript代码中）

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
这两句代码实现同一个功能
router.push({ name: 'user', params: { userId: 123 }})

（2）编程式方式二：router.psuh

在 Vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。

想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

当你点击 <router-link> 时，这个方法会在内部调用，所以说，点击 <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不能一起用，使用path如果再使用params，params会被忽略，所以

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）编程式方式二:router.replace

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

（3）访问路由

methods: {goBack () {window.history.length > 1? this.$router.go(-1): this.$router.push('/')}}

（4）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)

第四：详细介绍route的常用用法：

（1）$route.path

类型: string
字符串，对应当前路由的路径，总是解析为绝对路径，如 "/foo/bar"

（2）$route.params

类型: Object

例： routes：[ {path: '/user/:id', component: user} ] 为你配的路由，此时this.$route.params.id就是你的参数id的值

一个 key/value 对象，包含了动态片段和全匹配片段，是你自己写的路由的参数，如果没有路由参数，就是一个空对象。

（3）$route.query

类型: Object
一个 key/value 对象，表示 URL 查询参数。例如，对于路径 /foo?user=1，则有 $route.query.user == 1，如果没有查询参数，则是个空对象。

（4）$route.hash

类型: string
当前路由的 hash 值 (带 #) ，如果没有 hash 值，则为空字符串。

（5）$route.fullPath

类型: string
完成解析后的 URL，包含查询参数和 hash 的完整路径。

（6）$route.name

当前路由的名称 (查看命名路由)

（7）路由的监测

 watch: {'$route' (to, from) {// 对路由变化作出响应...}}

router route相关推荐

探讨Express Router Route
Express 基于 Node.js 平台,快速.开放.极简的 web 开发框架安装 //应用生成器工具 npm install express-generator -g//创建express应用包 ...
ajax 与route的区别,浅析vue-router jquery和params传参(接收参数)$router $route的区别
今天做项目时踩到了vue-router传参的坑(jquery和params),所以决定总结一下二者的区别. 1.jquery方式传参和接收参数传参: this.$router.push({ path ...
总结component和components,routes和route,router,$route和$router出现的场景
总结component和components,routes和route,router,$route和$router出现的场景 1.component(单数): a.在路由规则里出现过; b.在内置标签 ...
[React Router v4] Conditionally Render a Route with the Switch Component
We often want to render a Route conditionally within our application. In React Router v4, the Route ...
$router和$route的区别？
$router和$route的区别? 区别 $ router $ route 区别简单来说 $ router是用来操作路由的,$ route是用来获取路由信息的. $ router $router是 ...
Vue中route和router的区别
route 和 router route 包含路由信息的对象如图所示:fullPath hash name - router 可以理解为操作路由的方法,包含了如:histroy 和一些生命钩子函数- ...
Express4.x API (四)：Router (译)
Express4.x API 译文系列文章 Express4.x API (一):application (译) -- 完成 Express4.x API (二):request (译) -- 完成 ...
使用React Router以编程方式导航
通过react-router我可以使用Link元素来创建由react路由器本地处理的链接. 我在内部看到它调用this.context.transitionTo(...) . 我想从下拉列表中进行导航 ...
笔记react router 4（三）
上一篇我们说到了路由组件的嵌套.想必你已经运用自如了.那么,这一次我们来聊一聊4.X中Router的变更. 在3.X中我们若使用路由的模式,可通过在Router上配置history的值即可. 例如, ...

router route

router route相关推荐

最新文章

热门文章