关于vue中路由的跳转和参数传递,参数获取

更新时间：2022年03月31日 11:40:31 作者：洛神赋在csdn

这篇文章主要介绍了关于vue中路由的跳转和参数传递，参数获取方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

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="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/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>
      <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 style="margin-top: 100px"></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>时间已经摧毁了多少个西安城，雅典城。{{$route.params.country}}</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
    // Vue.extend(), 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>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue指令之v-for的使用说明
这篇文章主要介绍了Vue指令之v-for的使用说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
VUE兄弟组件传值操作实例分析
这篇文章主要介绍了VUE兄弟组件传值操作,结合实例形式分析了VUE兄弟组件传值操作的原理、步骤、实现方法及相关注意事项,需要的朋友可以参考下
2019-10-10
Vue简化用户查询/添加功能的实现
本文主要介绍了Vue简化用户查询/添加功能的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-01-01
Vue3中emits与attrs的区别分析
这篇文章主要给大家介绍了关于Vue3中emits与attrs区别的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下
2021-10-10
如何在vue项目中嵌入jsp页面的方法(2种)
这篇文章主要介绍了如何在vue项目中嵌入jsp页面的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-02-02
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
最近接了个项目需要开发一个app项目，由于是第一次接触这种app开发，经过一番思考，决定使用Vue3+Vant前端组件的模式进行开发，下面把问题分析及实现代码分享给大家，需要的朋友参考下吧
2021-06-06
Vue项目中安装使用axios全过程
这篇文章主要介绍了Vue项目中安装使用axios全过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
Vue表单绑定的实例代码（单选按钮,选择框（单选时,多选时,用 v-for 渲染的动态选项）
本文通过实例代码给大家介绍了Vue表单绑定（单选按钮，选择框（单选时，多选时,用 v-for 渲染的动态选项）的相关知识，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下
2019-05-05
Webpack和Vite的区别小结
本文主要介绍了Webpack和Vite的区别小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-05-05
Vuei18n 在数组中的使用方式
这篇文章主要介绍了Vuei18n 在数组中的使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08