您的位置：首页 > 产品设计 > UI/UE

vue动态路由匹配实例

2017-11-21 10:15 681 查看

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>

<div id="app">
<h1>Hello App!</h1>
<p>
此处 必须是 :to

<router-link :to="{name:'test',params:{ id:userInfo[0].idd }}">测试</router-link>     这里idd只是示例，可以是任意字段

</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
<script>
// 0. 如果使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter)

// 1. 定义（路由）组件。
// 可以从其他文件 import 进来
const User = {
template: '<div>{{this.$route.params.id}}</div>'
}

const router = new VueRouter({
routes: [
// 动态路径参数 以冒号开头
{
name:"test",
path: '/user/:id',
component: User
}
]
})

const app = new Vue({
router,
data(){
return {
userInfo:[
{
idd:"test1"
},
{
idd:"test2"
}
]
}
}
}).$mount('#app')

</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： vue js vue-router

相关文章推荐

新的分享

章节导航