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中如何不通过路由直接获取url中的参数
- vue-router2.0动态路由获取参数
- vue中如何不通过路由直接获取url中的参数
- vue不通过路由直接获取url中参数的方法示例
- Vue中的 this.$router.push() 参数获取 (通过路由传参)
- vue-router中定义动态路由、嵌套路由,并动态获取参数
- 详解vue-router2.0动态路由获取参数
- vue的路由传递参数!
- vue使用watch 观察路由变化,重新获取内容
- vuex getters 参数通过参数 获取信息
- vue路由带参跳转,刷新后参数不消失
- 详解vue嵌套路由-query传递参数
- vue-element-admin-master后端动态获取路由的改进
- vue 路由 及 跳转传递参数的总结
- vue路由参数可选 参数可有可无
- Laravel中获取路由参数Route Parameters的五种方法示例
- nodejs-express4.X框架路由中获取参数值方法
- vue获取当前激活路由
- MVC3在页面上获取当前控制器名称、Action名称以及路由参数
- vue 路由跳转取不到params参数