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

vue 路由参数获取

2017-10-24 00:00 543 查看
参数分为查询参数和路径参数

<div id='myDiv' class="container">

<div>
<router-link to='/'>Home</router-link>
<router-link to='/about'>About</router-link>
<router-link to='/user/ahao/?age=18'>Ahao</router-link>
<router-link to='/user/Lufu/more?age=16'>Lufu</router-link>
<router-link to='/user/Ace/more'>Ace</router-link>
<router-link to='/content'>Content</router-link>

</div>

<div>
<router-view></router-view>
</div>
</div>
</body>

<script>
//全局组件注册
my_component = Vue.component('my_component', {
template: '<h1>hello</h1>'
})

var routes = [
{
path: '/',
component: {
template: '<div><h1>Home</h1></div>'
}
},
{
path: '/content',
component: my_component
},
{
path: '/about',
component: {
template: '<div><h1>About</h1></div>'
}
},
{
path: '/user/:name',
component: {

//普通参数获取和查询参数获取
template: `
<div>
<h1>
User:{{$route.params.name}}
age:{{$route.query.age}}
</h1>

</div>
`
},

},
]

var router = new VueRouter({
routes: routes,
})
var myDiv = new Vue({
el: "#myDiv",
router: router,
})
</script>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  vue