我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果：
现在呢，像 /user/foo 和 /user/bar 都将映射到相同的路由。
一个“路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this$routeparams ，可以在每个组件内使用。于是，我们可以更新 User 的模板，输出当前用户的 ID：
你可以看看这个 在线例子 。
你可以在一个路由中设置多段“路径参数”，对应的值都会设置到 $routeparams 中。例如：
除了 $routeparams 外， $route 对象还提供了其它有用的信息，例如， $routequery (如果 URL 中有查询参数)、 $routehash 等等。你可以查看 API 文档 的详细说明。
提醒一下，当使用路由参数时，例如从 /user/foo 导航到 /user/bar ， 原来的组件实例会被复用 。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。 不过，这也意味着组件的生命周期钩子不会再被调用 。
复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化) $route 对象：
或者使用 22 中引入的 beforeRouteUpdate 导航守卫 ：
常规参数只会匹配被 / 分隔的 URL 片段中的字符。如果想匹配 任意路径 ，我们可以使用通配符 ( )：
当使用 通配符 路由时，请确保路由的顺序是正确的，也就是说含有 通配符 的路由应该放在最后。路由 { path: '' } 通常用于客户端 404 错误。如果你使用了 History 模式 ，请确保 正确配置你的服务器 。
当使用一个 通配符 时， $routeparams 内会自动添加一个名为 pathMatch 参数。它包含了 URL 通过 通配符 被匹配的部分：
vue-router 使用 path-to-regexp 作为路径匹配引擎，所以支持很多高级的匹配模式，例如：可选的动态路径参数、匹配零个或多个、一个或多个，甚至是自定义正则匹配。查看它的 文档 学习高阶的路径匹配，还有 这个例子 展示 vue-router 怎么使用这类匹配。
有时候，同一个路径可以匹配多个路由，此时，匹配的优先级就按照路由的定义顺序：谁先定义的，谁的优先级就最高。
可以的。this$routename
就可以获取到对应的name了
主要有以下几个步骤：
（1）
设置好路由配置
routermap({
'/history/:deviceid/:dataid':
{
name:
'history',
//
give
the
route
a
name
component:
{
}
}
})
这里有2个关键点：
a）给该路由命名，也就是上文中的
name:
'history',
b）在路径中要使用在路径中使用冒号开头的数字来接受参数，也就是上文中的
:deviceid,
:dataid；
（2）在v-link中传递参数；
history
这里的123，456都可以改用变量
在一些情况下，一个页面的path路径可能是不确定的，比如我们进入到用户界面时，希望是如下的路径：
- /user/aaa 或者 user/bbb 。
3、在 appvue 中的使用
4、 uservue 组件中获取到 userId ，这里的 userId 对应的就是路由映射中的参数
路由传参数。在很多时候我们需要路由上面传递参数，比如新闻列表页，我们需要传递新闻ID，给新闻详细页。
1新闻列表页模板
<template id="news">
<div>
<h2>新闻列表</h2>
<ul>
<li>
<router-link to="/news/001">新闻001</router-link>
</li>
<li>
<router-link to="/news/002">新闻002</router-link>
</li>
</ul>
</div>
</template>1234567891011121312345678910111213
我们访问/news/001，跳转到新闻详细页，展示001的这条新闻。
2新闻详细页组件准备
<template id="NewsDetail">
<div>
新闻详细页面
<span>{{$routeparamsid}}</span>
</div>
</template>123456123456
$routeparamsid获取路由上的参数
在js里定义路由组件：
//新闻详细页组件
const NewsDetail = { template: '#NewsDetail' };1212
3定义路由，增加一个路由
{ path: '/news/:id', component: NewsDetail },11
访问/news/001或者/news/002就展示新闻详细页
4全部代码如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src=">
以上就是关于Vue动态路由全部的内容，包括:Vue动态路由、vue-router 可以根据 URL 来获取 routers 定义的 name 属性吗、动态Vue-router(路由)等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）