请问vue的动态路由怎么动...

Question

愚弟刚刚入坑就想做个列表跳详情，详情页里接收一个，id(列表页传过来的，用来请求该条详情数据)，大佬能给个小demo吗

Answer 1

1.详情按钮触发事件

this.$router.push({path: xxx, query: {id: xxx}}) 或
this.$router.push({path: xxx, params: {id: xxx}})

2.路由设置

如果用params传的话,地址会是xxx/xxx  那么 路由的path: '/xxx/:id' 
如果用query传的话结果地址会是 xxx?id=xxx 路由的path: '/xxx'

3.详情页获取id

this.$route.query.id 或者 this.$route.params.id
详情页里获取到id了 这个id你要干啥就干啥啦

Answer 2

vue-router的文档上都有，讲的很详细
可以通过params或者query的形式传值与取值

Answer 3

//行点击事件
this.$route.push({name:'app',params:{id:'xx'}})
//router.js 配置
{
path: '/app/:id',
name: 'app',
component: resolve => require(['xxx'], resolve),
}
差不多这样子吧.

Answer 4

1. params传参: this.$router.push({name:'component',params:{id:'id'}})
   取参: this.$route.params.id
2. query传参: this.$router.push({name:'component',query:{id:'id'}})
   取参: this.$route.query.id

Answer 5

其实非常简单
你的详情页地址比如说：
http://segmentfault.com/#/router?id=1
router就是你的路由名称，后面id就是你的参数

在vue页面代码里直接试用this.$router.query.id就可以查到这个参数值。

---

另外也可以自己写个方法获取，上面的是hash后面的参数，那我想取search后面的参数呢？
你的详情页地址比如说：
http://segmentfault.com/?id=1#/router

created(){
    this.getQuery('id');
},
methods:{
    getQuery(name){
        let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        let r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(decodeURIComponent(r[2]));
        return null;
    }
}

---

都可以