關於vue中路由的跳轉和引數傳遞,引數獲取

2022-03-31 13:00:54

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>

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。