關(guān)于vue中路由的跳轉(zhuǎn)和參數(shù)傳遞,參數(shù)獲取

更新時間：2022年03月31日 11:40:31 作者：洛神賦在csdn

這篇文章主要介紹了關(guān)于vue中路由的跳轉(zhuǎn)和參數(shù)傳遞，參數(shù)獲取方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue中的路由講三點(diǎn)

第一點(diǎn)：

指令級別的路由<router-link>和程序級別的路由router.push();

第二點(diǎn)：

通過query和params傳遞參數(shù)和path和name之間的關(guān)系。

第三點(diǎn)：

$router和$route地區(qū)別

聲明：由于路由和傳參和參數(shù)獲取密切結(jié)合，所以將他們混合在一起講解，最后會附加一個實(shí)例。

html中通過<router-link>指令完成路由跳轉(zhuǎn)

第一種情況就是以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則是這個路由要抵達(dá)的模板或者說頁面，定義如下

const WuHan = {template: '<div>武昌， 漢口， 漢陽 --- {undefined{$route.query.city}}</div>'}

注意由于在<router-link>中是通過query的形式區(qū)傳遞參數(shù)，所有在目的地頁面中也只能采用query的形式獲取參數(shù)。

也可以不采用query的方法，而采用params的形式傳遞參數(shù)

<router-link :to="{ name: 'wuhan', params: {city: 'wuhan'}}">router3</router-link><br>

那么在在路由列表中的path中必須帶上params傳遞過來的參數(shù)，否則在目的頁面中無法獲取參數(shù)

{ name: 'wuhan', path: '/wuhan/:city',component: WuHan }

在目的頁面中以params的形式獲取參數(shù)對應(yīng)的值

const WuHan = {template: '<div>武昌， 漢口， 漢陽 --- {undefined{$route.params.city}}</div>'}

注意事項(xiàng)：不可以在<router-link>的路由對象中同時出現(xiàn)path和params，此時params作廢。目的頁面中獲取不到參數(shù)。

推薦是name和params搭配，path和query搭配。最好時不用params而只是用query的形式傳遞參數(shù)以及獲取參數(shù)，

因?yàn)椴捎胮arams的方式傳遞參數(shù)，當(dāng)你進(jìn)入到目的頁面后確實(shí)能夠正確地獲取參數(shù),但是，當(dāng)你刷新頁面時，參數(shù)就會丟失。

所以推薦使用query地形式傳遞參數(shù)。

最后談?wù)?router和$route地區(qū)別

結(jié)論：沒有任何關(guān)系

$router地類型時VueRouter，整個項(xiàng)目只有一個VueRouter實(shí)例，使用$router是實(shí)現(xiàn)路由跳轉(zhuǎn)的，$router.push()。

跳轉(zhuǎn)成功后，抵達(dá)某一個頁面，此時要獲取從上一個頁面?zhèn)鬟f過來的參數(shù)，此時使用$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/史鐵生">務(wù)虛筆記</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>前不見古人，后不見來者。念天地之悠悠，獨(dú)愴然而涕下！</div>'};
    const Bar = { template: '<div>千山鳥飛絕，萬徑人蹤滅。孤舟蓑笠翁，獨(dú)釣寒江雪。</div>' };
    const Capital = { template: '<div>時間已經(jīng)摧毀了多少個西安城，雅典城。{{$route.params.country}}</div>' }
    const Book = {template: '<div>務(wù)虛筆記 ---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>

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: