vue路由传参常用写法,vue路由传参params和query差别,params刷新页面丢失参数，query不会丢失

<template>
<div class="hello">
<!-- to这样过去得也是params拿。但是刷新页面可以拿到 -->
<router-link :to="'/news/'+id">跳啊跳</router-link>
<h1 @click="toParams">我是params去新页面</h1>
<router-link :to="{name:'par',params:{'id':id}}">我是router-linlk_to是对象形式过去的;params去新页面</router-link>
下面是子组件
<p @click="toOne">点我去aaone</p>
<p @click="toTwo">点我去two</p>
<router-view></router-view>

</div>
</template>

<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App',
id:'222'
}
},
// 主要是为了证实  params  刷新页面 参数会丢失。  而  query不会丢失。
methods:{
toOne() {
this.$router.push({name:'one',params:{'id':'111'}})
},
toTwo(){
// 子组件  如果要使用 path+query传参 。记得路由.js的path值不要和name值一样，要不把父路由地址和它拼过去  /two  因为父正好是/

// name 可以 和params,query搭配。但是path只能和query搭配
this.$router.push({name:'tw',query:{'i':'111'}})
},
toParams(){
this.$router.push({name:'par',params:{'id':'ppp'}})
}
}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
const one = () => import ('@/view/one.vue');
const two = () => import('@/view/two.vue')
const news = () =>import('@/view/news.vue')
const par = () => import('@/view/params')
Vue.use(Router)

export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld,
children:[{
path:'one',
name:'one',
component:one,
},{
path:'two',
name:'tw',
component:two
}
]
},
{
path:'/news/:id',
name:'news',
component:news
},
{
path:'/par',
name:'par',
component:par
}
]
})