目前前端流行的三大框架,都有自己的路由实现:
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。
我们可以访问其官方网站对其进行学习:https://router.vuejs.org/zh/
vue-router是基于路由和组件的
/data/:id这个路由匹配/data/1,/data/2这里的 id 叫 params /data?id=1 /data?id=2 这里的 id 叫 query
params方法传参时,要在路由后面加参数名,并且传参时,参数名要跟路由后面设置的参数名对应。
query方法,就没有这种限制,直接在跳转里面用就可以。
{ path: '/detail/:id/', name: "detail", component: detail//这个details是传进来的组件名称 } 使用: 方法1:<router-link :to="{ name: 'details', params: { id: 123 }}">点击按钮</router-link> 方法2:this.$router.push({name:'details',params:{id:123}}) 页面url显示结果是:http://localhost:8081/#/details/123
params跳转方式:
{ path: '/detail',//这里不需要参入参数,参见上面的params写法 name: "detail", component: detail//这个details是传进来的组件名称 } 使用: 方法1:<router-link :to="{ name: 'details', query: { id: 123 }}">点击</router-link> 方法2:this.$router.push({name:'details',query:{id:123}}) 方法3:<router-link :to="{ path: 'details', query: { id: 123 }}">点击</router-link> 方法4:this.$router.push({path:'details',query:{id:123}}) 页面url显示结果是:http://localhost:8081/#/details?id=123
query跳转方法:
query和params分别是:this.$route.query.id,this.$route.params.id
params在浏览器地址栏中不显示参数名称
http://47.107.171.252:8001/#/detail/123456
query在浏览器地址栏中显示参数名称
http://47.107.171.252:8001/#/detail?id=123456