<router-link to="跳转的路径"></router-link> 要链接到一个命名路由,可以给 router-link 的 to 属性传一个对象: <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
router.push({ name: 'user', params: { userId: 123 } }) //替换掉当前的历史记录,会产生新的历史记录 this.$route.push('跳转的路径') //替换掉当前的历史记录,直接返回首页面 this.$route.replace('跳转的路径')
$router:路由器对象
$route:当前路由信息
r o u t e 是 “ 路 由 信 息 对 象 ” , 包 括 p a t h , p a r a m s , h a s h , q u e r y , f u l l P a t h , m a t c h e d , n a m e 等 路 由 信 息 参 数 。 而 route是“路由信息对象”,包括path,params,hash,query,fullPath,matched,name等路由信息参数。 而 route是“路由信息对象”,包括path,params,hash,query,fullPath,matched,name等路由信息参数。而router是“路由实例”对象包括了路由的跳转方法,钩子函数等
路由,主要用于组件切换,通过设置不同的path,切换视图,
向服务器发送的不同的请求,获取不同的资源
通过a标签和vue-router对比,vue-router避免了重复渲染,
不像a标签一样需要重新渲染,导致一些动态添加路由的机制失效
1)引入方式不同: query要使用path来引入,params要使用name来引入,接受参数格式类似,引用分别是this.route.query.name和this.route.query.name和this.route.params.name
2)形成的路径不同(或者url地址显示不同):
使用query传参的话,会在浏览器的url栏看到传的参数类似于get请求,使用params传参的话则不会,类似于post请求。
params传递后形成的路径:/router/123,/router/zhangsan
query传递后形成的路径:/router?id=666&name=zhangsan
3)是否受动态路径参数影响
Query传递的参数不会受路径参数的影响,会全部展示到路径上,刷新不会丢失query里面的数据;
params传递的参数会受路径参数的影响,只会展示含有动态路径参数的部分,刷新会丢失没有设置动态路径参数的params的数据