VueRouter-動態路由

本文轉載自查看原文 2020-02-24 22:40 739 vue

用法：

在url中，通過定義參數，那么以后url中就可以動態的傳遞這些參數。語法：`/our/:參數名`

        let router = new VueRouter({
            routes: [
                {
                   // user為參數
                    path: "/our/:user",
                    component: our
                }
            ]
        })

　　2. 在組件中，可以通過`this.$route.params.參數名`拿到；在組件的模板中可以通過`$route.params.參數名`拿到。

        var our = Vue.extend({
            template: "<h1>歡迎,{{$route.params.user}}</h1>"
        })

`this.$route`和`this.$router`的區別：

1、`this.$route`：代表的是當前這個路由里的一些信息，如：`params`、`query`、`fullPath`等

2、`this.$router`：代表的是全局`VueRouter`對象。

整體代碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <title>VueRouter-動態路由</title>
</head>

<body>
    <div id="app">
        <ul>
            <li>
                <router-link to="/">首頁</router-link>
            </li>
            <li>
                <router-link to="/our/Xsan">我們</router-link>
                </router-link>
            </li>
        </ul>
        <router-view></router-view>
    </div>
    <script>
        var index = Vue.extend({
            template: "<h1>首頁</h1>"
        })
        var our = Vue.extend({
            template: "<h1>歡迎,{{$route.params.user}}</h1>"
        })
        let router = new VueRouter({
            routes: [{
                    path: "/",
                    component: index
                },
                {
                    path: "/our/:user",
                    component: our
                }
            ]
        })
        new Vue({
            el: "#app",
            router: router,
            data: {

            }
        })
    </script>
</body>

</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 VueRouter爬坑第二篇-動態路由第十四節：VueRouter4.x簡介、基本用法、路由懶加載(打包分析)、動態路由、路由嵌套、相關Api 動態路由 Vue2+VueRouter2+webpack 構建項目實戰（三）：配置路由，運行頁面路由的跳轉 , 動態路由的配置靜態路由，動態路由 RIP react動態路由以及獲取動態路由 Vue的路由及靜態路由和動態路由的區別動態添加路由addRoutes VUE 動態路由