vue动态路由匹配
vue动态路由匹配
我们经常需要把某种模式匹配到的所有路由，全部映射到同个组件。例如，我们有一个User组件,对于ID各不相同的用户，都要使用这个组件来渲染。那么，我们可以在vue-router的路由路径中使用 “动态路径参数”（dynamic segment）来达到这个效果：
const User = {
template: '<div>User</div>'
}
const router = new VueRouter({
routes: [
// 动态路径参数 以冒号开头
{ path: '/user/:id', component: User }
]
})
现在呢，像/usr/foo 和 /user/bar 都将映射到相同的路由。
一个“路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。于是，我们可以更新 User 的模板，输出当前用户的 ID：
const User = {
template: '<div>User {{ $route.params.id }}</div>'
}
你可以看看这个在线例子。
你可以在一个路由中设置多段“路径参数”，对应的值都会设置到 $route.params 中。例如：
| 模式 | 匹配路径 | $route.params |
|---|---|---|
| /user/:username | /user/evan | { username: 'evan' } |
| /user/:username/post/:post_id | /user/evan/post/123 | { username: 'evan', post_id: 123 } |
除了 $route.params 外，$route 对象还提供了其它有用的信息，例如，$route.query (如果 URL 中有查询参数)、$route.hash 等等。你可以查看 API 文档 的详细说明。
举例：显示xx的页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo4</title>
</head>
<body>
<div id="app">
<router-link to="/user/zs">张三</router-link>
<router-link to="/user/ls">李四</router-link>
<hr>
<router-view></router-view>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
//写路由
const routeArray=[
{
path:'/user/:name',
component:{
template:`<div>
<h1>这是{{$route.params.name}}的主页页面!</h1>
</div>`
}
}
]
//生成VueRouter实例
const routerObj = new VueRouter({
routes:routeArray
})
var app = new Vue({
el:"#app",
data:{},
router:routerObj //将路由实例挂载到vue实例中
})
</script>
</body>
</html>
举例2： 获取url中的年龄和爱好
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo5</title>
</head>
<body>
<div id="app">
<!--路由的入口-->
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<!--/index表示下面定义的path-->
<router-link to="/user/张三">张三</router-link>
<router-link to="/user/李四">李四</router-link>
<hr>
<!--路由的出口-->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
//写路由
const routeArray = [
{
path:'/user/:name',
component:{
template:`<div>
<h1>这是{{$route.params.name}}的主页页面</h1>
<p>芳龄:{{$route.query.age}}</p>
<p>爱好:{{$route.query.hobby}}</p>
</div>`
}
}
]
//生成VueRouter实例
const routerObj = new VueRouter({
routes:routeArray
})
var app = new Vue({
el:'#app',
data:{},
router:routerObj //将路由实例挂载到vue实例中
})
</script>
</body>
</html>
