关于vue中路由的跳转和参数传递，参数获取
⽬录
vue中的路由讲三点
html中通过<router-link>指令完成路由跳转
第⼀种情况就是以path形式
第⼆种情况就是以路由对象Object的形式
最后谈谈$router和$route地区别
结论：没有任何关系
vue中的路由讲三点
第⼀点：
指令级别的路由<router-link>和程序级别的路由router.push();
第⼆点：
通过query和params传递参数和path和name之间的关系。
第三点：
$router和$route地区别
声明：由于路由和传参和参数获取密切结合，所以将他们混合在⼀起讲解，最后会附加⼀个实例。
html中通过<router-link>指令完成路由跳转
第⼀种情况就是以path形式
<router-link v-bind:to="/foo">登幽州台歌</router-link>
第⼆种情况就是以路由对象Object的形式
<router-link :to="{ name: 'wuhan', query: {city: 'wuhan'}}">router1</router-link>
注意这⾥的name指的是具名路由，在路由列表中的配置如下
{ name: 'wuhan', path: '/wuhan', component: WuHan }
⽽WuHan则是这个路由要抵达的模板或者说页⾯，定义如下
const WuHan = {template: '<div>武昌，汉⼝，汉阳 --- {undefined{$route.query.city}}</div>'}
注意由于在<router-link>中是通过query的形式区传递参数，所有在⽬的地页⾯中也只能采⽤query的形式获取参数。
也可以不采⽤query的⽅法，⽽采⽤params的形式传递参数
<router-link :to="{ name: 'wuhan', params: {city: 'wuhan'}}">router3</router-link><br>
那么在在路由列表中的path中必须带上params传递过来的参数，否则在⽬的页⾯中⽆法获取参数
{ name: 'wuhan', path: '/wuhan/:city',component: WuHan }
在⽬的页⾯中以params的形式获取参数对应的值
const WuHan = {template: '<div>武昌，汉⼝，汉阳 --- {undefined{$route.params.city}}</div>'}
注意事项：不可以在<router-link>的路由对象中同时出现path和params，此时params作废。⽬的页⾯中获取不到参数。
推荐是name和params搭配，path和query搭配。最好时不⽤params⽽只是⽤query的形式传递参数以及获取参数，
因为采⽤params的⽅式传递参数，当你进⼊到⽬的页⾯后确实能够正确地获取参数，但是，当你刷新页⾯时，参数就会丢失。所以推荐使⽤query地形式传递参数。
最后谈谈$router和$route地区别
结论：没有任何关系
$router地类型时VueRouter，整个项⽬只有⼀个VueRouter实例，使⽤$router是实现路由跳转的，$router.push()。跳转成功后，抵达某⼀个页⾯，此时要获取从上⼀个页⾯传递过来的参数，此时使⽤$route。
或者是$route.query.city，或者是$route.params.city。也就是说，$router和$route作⽤在路由不同的阶段。
<html>
<head><meta charset="UTF-8"></head>
<body>
<script src="unpkg/vue/dist/vue.js"></script>
<script src="unpkg/vue-router/dist/vue-router.js"></script>
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- use router-link component for navigation. -->
<!-- specify the link by passing the `to` prop. -->
<!-- <router-link> will be rendered as an `<a>` tag by default -->
<router-link to="/foo">登幽州台歌</router-link>
<router-link to="/bar">江雪</router-link>
<router-link to="/city/中国">西安</router-link>react router路由传参
<router-link to="/city/希腊">雅典</router-link>
<router-link to="/book/史铁⽣">务虚笔记</router-link>
<br>
<router-link :to="{ name: 'wuhan', query: {city: 'wuhan'}}">router1</router-link><br>
<router-link :to="{ path: '/wuhan', query: {city: 'wuhan'}}">router2</router-link><br>
<router-link :to="{ name: 'wuhan', params: {city: 'wuhan'}}">router3</router-link><br>
</p>
<!-- route outlet -->
<!-- component matched by the route will render here -->
<router-view ></router-view>
</div>
<script>
// 1. Define route components.
// These can be imported from other files
const Foo = { template: '<div>前不见古⼈，后不见来者。念天地之悠悠，独怆然⽽涕下！</div>'};
const Bar = { template: '<div>千⼭鸟飞绝，万径⼈踪灭。孤⾈蓑笠翁，独钓寒江雪。</div>' };
const Capital = { template: '<div>时间已经摧毁了多少个西安城，雅典城。{{$untry}}</div>' }
const Book = {template: '<div>务虚笔记 ---by {{$route.params.author}}</div>'}
const WuHan = {template: '<div>武昌，汉⼝，汉阳 --- {{$route.params.city}}</div>'}
// 2. Define some routes
// Each route should map to a component. The "component" can
// either be an actual component constructor created via
// d(), or just a component options object.
// We'll talk about nested routes later.
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar },
{ path: '/city/:country', component: Capital },
{ path: '/book/:author', component: Book },
{ path: '/wuhan/:city', name: 'wuhan', component: WuHan }
]
/
/ 3. Create the router instance and pass the `routes` option
// You can pass in additional options here, but let's
// keep it simple for now.
const router = new VueRouter({
routes: routes
})
/*
function navigate() {
router.push({
path: '/wuhan',
params: {
city: 'wuhan'
}
});
}
*/
// 4. Create and mount the root instance.
// Make sure to inject the router with the router option to make the
// whole app router-aware.
const app = new Vue({router: router}).$mount('#app')
// Now the app has started!
</script>
</body>
</html>
以上为个⼈经验，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。