路由組件傳參實例

時間 2019-11-09

原文原文鏈接

在組件中使用$route會使之與其對應路由造成高度耦合，從而使組件只能在某些特定的URL上使用，限制了其靈活性javascript

也就是說含有{{$route.params.id}}的組件在其餘地方根本不能用，由於有些地方根本不須要{{$route.params.id}}這個內容html

使用props將組件和路由解耦vue

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})

經過props解耦java

const User = {
  props: ['id'],
  template: '<div>User {{ id }}</div>'
}
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User, props: true },

    // 對於包含命名視圖的路由，你必須分別爲每一個命名視圖添加 `props` 選項：
    {
      path: '/user/:id',
      components: { default: User, sidebar: Sidebar },
      props: { default: true, sidebar: false }
    }
  ]
})

這樣你即可以在任何地方使用該組件，使得該組件更易於重用和測試。vue-router

完整例子：app

<body class="">
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>
    <div id="app">
        <h1>路由傳參</h1>
        <router-link to="/user/111">a title</router-link>
        <br />
        <router-link to="/user/222">b title</router-link>
        <router-view name="a"></router-view>
		<router-view></router-view>
    </div>
    <script>
    var user1 = {
        props: ['id'],
        template: "<div>this is {{id}} </div>"
    };
    var user2 = {
        props: ['id'],
        template: "<div>that is {{id}} </div>"
    };
    const router = new VueRouter({
        routes: [{
            path: "/user/:id",
            components:{a:user1,default:user2},
            props: {a:true,default:false}
        }]
    })
    const app = new Vue({ router }).$mount("#app")
    </script>
</body>

a title
b titleide

點擊a title 顯示函數

this is 111測試

that isthis

點擊b title

顯示this is 222

that is

布爾模式：若是props被設置爲true，route.params 將會被設置爲組件屬性

對象模式：若是props是一個對象，它會被按原樣設置爲組件屬性。當props是靜態的時候有用。

<body class="">
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>
    <div id="app">
        <h1>Redirect</h1>
        <router-link to="/user">a title</router-link>
        
        <router-view></router-view>
    </div>
    <script>
    var user = {
        props: ['name'],
        template: "<div>this is {{name}} </div>"
    };

    const router = new VueRouter({
        routes: [{
            path: "/user",
            component: user,
            props: {name:"lily"}
        }]
    })
    const app = new Vue({ router }).$mount("#app")
    </script>
</body>

點擊顯示this is lily

函數模式：你能夠建立一個函數返回 props。這樣你即可以將參數轉換成另外一種類型，將靜態值與基於路由的值結合等等。

<body class="">
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>
    <div id="app">
        <h1>Route props</h1>
        <ul>
            <li>
                <router-link to="/dynamic/1">/dynamic/1</router-link>
            </li>
        </ul>
        <router-view class="view" foo="123"></router-view>
    </div>
    <script>
    function dynamicPropsFn(route) {
        const now = new Date()
        return {
            name: (now.getFullYear() + parseInt(route.params.years)) + '!'
        }
    }
    var Hello = {
        props: ['name'],
        template: '<h2 class="hello">Hello {{ name}}</h2>'
    };

    const router = new VueRouter({
        routes: [
            { path: '/dynamic/:years', component: Hello, props: dynamicPropsFn }
        ]
    })
    const app = new Vue({ router }).$mount("#app")
    </script>
</body>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。