Vue 路由参数传递

1. url路径传递方式（Vue动态路由匹配）：www.xxx.com/user-url/123
2. url参数传递方式: www.xxx.com/user-query?id=123
3. vue params参数传递方式: 不改变url路径，采用vue内部参数传递方式

<div id="app">
<h3>URL路径方式传递参数</h3>
<router-link to="/user-url/111">字符串—URL路径方式传递参数</router-link>
<br/>
<router-link :to="{ path: '/user-url/222' }">对象[path]—URL路径方式传递参数</router-link>
<br/>

<h3>URL参数方式传递参数</h3>
<router-link to="/user-query?id=333">字符串—URL参数方式传递参数</router-link>
<br/>
<router-link :to="nameQuery">对象[name+query]—URL参数方式传递参数</router-link>
<br/>
<router-link :to="pathQuery">对象[path+query]—URL参数方式传递参数</router-link>
<br/>

<h3>Vue params方式传递参数</h3>
<router-link :to="nameParams">对象[name+params]—params方式传递参数</router-link>
<br/>
<router-link :to="pathParams">对象[path+params]—params方式传递参数</router-link>
<br/>
对象[path+params]方式组合无效，params方式只有对象[name+params]组合方式
<router-view></router-view>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

const UserParams = { template: '<div>user id: {{ $route.params.id }}</div>' }
const UserQuery = { template: '<div>user id: {{ $route.query.id }}</div>' }
routes = [
{ path:'/user-url/:id', name:"user-url" ,component: UserParams },
{ path:'/user-query', name:"user-query" ,component: UserQuery },
{ path:'/user-params', name:"user-params" ,component: UserParams },
]
router = new VueRouter({
routes
})
const app = new Vue({
router,
data:{
nameQuery: { name: 'user-query', query: { id: 444 } },
pathQuery: { path: '/user-query', query: { id: 555 } },
nameParams: { name: 'user-params', params: { id: 666 } },
pathParams: { path: '/user-params', params: { id: 777 } }
}
}).$mount('#app')