[詳細]ヴュールーティングシステム--2019-08-07午前十時57分04秒

その他 2019-08-07 13:07:52 訪問数: null

ディレクトリ

オリジナル：http://106.13.73.98/__/55/

すべてが良好な結合のために分離した後、紙は、アーキテクチャ分離前端と後端、経路制御を実装する方法のフロントエンド、すなわちVueのルーティングシステム--VueRouterを記載しています。

VueRouterダウンロード（最新バージョンのデフォルト）します。https：//unpkg.com/[email protected]/dist/vue-router.js

@
*
VueRouter実装原理：**

==アンカー成分の含有量を変更、変化値に応じ。==

さんがVueRouter、自分のルーティング制御を実現、次のコードを使用していないを見てみましょう：

<body>
<div id="app"></div>
<script>
    let oDiv = document.getElementById('app');
    window.onhashchange = function () {
        // vue-router的实现原理是根据锚值的改变来对页面进行切换
        switch (location.hash) {
            case '#/login':
                oDiv.innerHTML=`<h1>我是登陆页面</h1>`;
                break;
            case '#/register':
                oDiv.innerHTML = `<h1>我是注册页面</h1>`;
                break;
            // 输入其他路径将显示为首页
            default:
                oDiv.innerHTML = `<h1>我是首页</h1>`;
                break;
        }
    };
    console.log(location.hash);
</script>
</body>

テスト結果を示す：
ここに画像を挿入説明
あなたは、アンカーの値を変更することで、私たちが必要なものにページジャンプを見ることができます。

のは、ルーティング制御達成VueRouterを見てみましょう：

<body>
<div id="app"></div>
<script>
    // 第一步：在Vue根实例中使用VueRouter
    Vue.use(VueRouter);
    let Home = {
        template: `
            <div>
                <h1>我是首页</h1>
            </div>
        `,
    };
    let Login = {
        template: `
            <div>
                <h1>我是登陆页面</h1>
            </div>
        `,
    };
    let Register = {
        template: `
            <div>
                <h1>我是注册页面</h1>
            </div>
        `,
    };
    let App = {
        // 第四部：监听a标签的锚点值的改变
        // 下面的router-link会渲染成a标签，to为标签的href属性，to后面是router中定义的路径
        // 下面的router-view是页面内容的渲染出口
        template: `
            <div>
                <router-link to="/">首页</router-link>
                <router-link to="/login">登陆</router-link>
                <router-link to="/register">注册</router-link>
                <router-view></router-view>
            </div>
        `,
    };
    // 第二步：实例化一个router对象(本质上是将路径和页面绑定了对应关系)
    let router = new VueRouter({
        routes: [
            // 注意：routes，不是routers
            {
                path: '/',
                component: Home,
            },
            {
                path: '/login',
                component: Login,
            },
            {
                path: '/register',
                component: Register,
            },
        ],
    });
    new Vue({
        el: '#app',
        template: `<App/>`,
        // 第三步：在根实例中注册router对象
        router: router,
        components: {
            App,
        },
    });
</script>
</body>

示されるように、試験結果：
ここに画像を挿入説明

ルート名

一つの方法：
==オブジェクト名ルート名を指定するための属性を追加することにより、== VUE-ルータ。
==呼び出されます。vバインド：= {に名：「 ルート名」} ==

<body>
<div id="app"></div>
<script>
    // 在Vue根实例中使用VueRouter
    Vue.use(VueRouter);
    let Home = {
        template: `
            <div>
                <h1>我是首页</h1>
            </div>
        `,
    };
    let Login = {
        template: `
        <div>
            <h1>我是登陆页面</h1>
        </div>
        `,
    };
    let Register = {
        template: `
            <div>
                <h1>我是注册页面</h1>
            </div>
        `,
    };
    let App = {
        // 下面的router-link会渲染成a标签，to为a标签的href属性，to后面的name指定的是路由别名
        // 下面的router-view是页面内容的渲染出口
        // 通过v-bind绑定定义的路由名称, v-bind:to="{ ... }", 可简写为:to="{ ... }"
        template: `
            <div>
                <router-link v-bind:to="{ name: 'home' }">首页</router-link>
                <router-link :to="{ name: 'login' }">登陆</router-link>
                <router-link :to="{ name: 'register' }">注册</router-link>
                <router-view></router-view>
            </div>
        `,
    };
    // 实例化一个router对象(本质上是将路径和页面内容绑定了对应关系)
    let router = new VueRouter({
        // 注意：routes, 不是routers
        routes: [
            {
                // 路由命名
                name: 'home',
                path: '/',
                component: Home,
            },
            {
                name: 'login',
                path: '/login',
                component: Login,
            },
            {
                name: 'register',
                path: '/register',
                component: Register,
            },
        ],
    });
    new Vue({
        el: '#app',
        template: `<App/>`,
        // 在根实例中注册router对象
        router: router,
        components: {
            App,
        },
    });
</script>
</body>

第二の方法：

<body>
<div id="app"></div>
<script>
    Vue.use(VueRouter);
    let App = {
        template: `
        <div>
            <router-link to="/">首页</router-link>
            <router-view name="header"></router-view>
            <router-view name="footer"></router-view>
        </div>
    `,
    };
    let router = new VueRouter({
        routes: [
            {
                path: '/',
                components: {
                    header: {
                        template: `
                            <div>头部</div>
                        `,
                    },
                    footer: {
                        template: `
                            <div>底部</div>
                        `,
                    },
                },
            },
        ],
    });
    new Vue({
        el: '#app',
        template: `<App/>`,
        router: router,
        components: {
            App,
        },
    });
</script>
</body>

ルーティングパラメータ

<body>
<div id="app"></div>
<script>
    /*
    在真实的场景中，有以下两种路径形式：
    1. xx.html/users/1
    2. xx.html/users?userId=1
    */
    // 在Vue根实例中使用VueRouter
    Vue.use(VueRouter);
    let Home = {
        template: `
            <div>
                <h1>我是主页面</h1>
            </div>
        `,
    };
    let userParams = {
        template: `
            <div>
                <h1>我是用户1的信息</h1>
            </div>
        `,
    };
    let userQuery = {
        template: `
            <div>
                <h1>我是用户2的信息</h1>
            </div>
        `,
    };
    let App = {
        // 下面的router-link会渲染成a标签，to为a标签的href属性，to后面的name指定的是路由别名
        // 下面的router-view是页面内容的渲染出口
        // 通过v-bind绑定路由名称, v-bind:to="{ ... }", 可简写为:to="{ ... }"
        // 下面的params与query参数分别对应上面所说的两种路径形式
        template: `
            <div>
                <router-link :to="{ name: 'home' }">首页</router-link>
                <router-link :to="{ name: 'userParams', params: {userId: 1 } }">登陆</router-link>
                <router-link :to="{ name: 'userQuery', query: { userId: 2 } }">注册</router-link>
                <router-view></router-view>
            </div>
        `,
    };
    // 创建一个vue-router对象(本质上是将路径和页面内容绑定了对应关系)
    let router = new VueRouter({
        routes: [
            {
                name: 'home',
                path: '/',
                component: Home,
            },
            {
                // 1. xx.html/users/1
                name: 'userParams',
                path: '/users/:userId',
                component: userParams,
            },
            {
                // 2. xx.html/users?userId=1
                name: 'userQuery',
                path: '/users',
                component: userQuery,
            },
        ],
    });
    new Vue({
        el: '#app',
        template: `<App/>`,
        // 在跟实例中注册router对象
        router: router,
        components: {
            App,
        },
    });
</script>
</body>

示されるように、試験結果：
ここに画像を挿入説明
ここに画像を挿入説明
***

ルートパラメーターの原則

<body>
<div id="app"></div>
<script>
    /*
    在真实的场景中，有以下两种路径形式：
    1. xx.html/user/1
    2. xx.html/user/?userId=1
     */
    // 在Vue根实例中使用VueRouter
    Vue.use(VueRouter);
    let Home = {
        template: `
            <div>
                <h1>我是主页面</h1>
            </div>
        `,
    };
    let userParams = {
        template: `
            <div>
                <h1>我是用户1的信息</h1>
            </div>
        `,
        created () {
            console.log('this.$route:', this.$route);
            console.log('userId:', this.$route.params.userId);
            // 此时可以发送ajax请求到后端获取数据
        },
    };
    let userQuery = {
        template: `
            <div>
                <h1>我是用户2的信息</h1>
            </div>
        `,
        created () {
            console.log('this.$route:', this.$route);
            console.log('userId:', this.$route.query.userId);
            // 此时可以发送ajax请求到后端获取数据
        }
    };
    let App = {
        // 下面的router-link会渲染成a标签，to为a标签的href属性，to后面的name指定的是路由别名
        // 下面的router-view是页面内容的渲染出口
        // 通过v-bind绑定路由名称, v-bind:to="{ ... }", 可简写为:to="{ ... }"
        // 下面params与query参数分别对应上面所说的两种路径形式
        template: `
            <div>
                <router-link :to="{ name: 'home' }">首页</router-link>
                <router-link :to="{ name: 'userParams', params: {userId: 1 } }">登陆</router-link>
                <router-link :to="{ name: 'userQuery', query: { userId: 2 } }">注册</router-link>
                <router-view></router-view>
            </div>
        `,
    };
    // 创建一个vue-router对象(本质上是将路径和页面内容绑定了对应关系)
    let router = new VueRouter({
        routes: [
            {
                name: 'home',
                path: '/',
                component: Home,
            },
            {
                // 1. xx.html/user/1
                name: 'userParams',
                path: '/user/:userId',
                component: userParams,
            },
            {
                // 2. xx.html/user/?userId=1
                name: 'userQuery',
                path: '/user',
                component: userQuery,
            },
        ],
    });
    new Vue({
        el: '#app',
        template: `<App/>`,
        // 在跟实例中注册router对象
        router: router,
        components: {
            App,
        },
    });
</script>
</body>

示されるように、試験結果：
ここに画像を挿入説明
ここに画像を挿入説明

サブルーティング

<body>
<div id="app"></div>
<script>
    // 在Vue根实例中使用VueRouter
    Vue.use(VueRouter);
    let Home = {
        template: `
            <div>
                <h1>我是首页</h1>
            </div>
        `,
    };
    let Test = {
        template: `
            <div>
                <h1>我是测试页面</h1>
                <router-link to="childpages01">子页面01</router-link>
                <router-link to="childpages02">子页面02</router-link>
                <router-view></router-view>
            </div>
        `,
    };
    let ChildPages01 = {
        template: `
            <div>
                <h1>我是子页面01</h1>
            </div>
        `,
    };
    let ChildPages02 = {
        template: `
            <div>
                <h1>我是子页面02</h1>
            </div>
        `,
    };
    let App = {
        template: `
            <div>
                <router-link :to="{ name: 'home' }">首页</router-link>
                <router-link :to="{ name: 'test' }">测试页面</router-link>
                <router-view></router-view>
            </div>
        `,
    };
    // 实例化一个router对象(本质上是将路径和页面内容绑定了对应关系)
    let router = new VueRouter({
        routes: [
            {
                name: 'home',
                path: '/',
                component: Home,
            },
            {
                name: 'test',
                path: '/courses',
                component: Test,
                // children实现子路由(子页面)
                children: [
                    {
                        path: 'childpages01',
                        component: ChildPages01,
                    },
                    {
                        path: 'childpages02',
                        component: ChildPages02,
                    },
                ],
            },
        ],
    });
    new Vue({
        el: '#app',
        template: `<App/>`,
        // 在根实例中注册router对象
        router: router,
        components: {
            App,
        },
    });
</script>
</body>

図の試験結果は、次の
ここに画像を挿入説明
目に見えるが、この方法を使用して、サブページを正しく表示することはできません。
***

追記のサブルーティング

==追加パラメータはノート、サブパスルーティングパスに追加されます常にに追加される。
アペンドパラメータはばかり一つのサブ経路に適用==。

<body>
<div id="app"></div>
<script>
    // 在Vue根实例中使用VueRouter
    Vue.use(VueRouter);
    let Home = {
        template: `
            <div>
                <h1>我是首页</h1>
            </div>
        `,
    };
    let Test = {
        // 添加append参数
        template: `
            <div>
                <h1>我是测试页面</h1>
                <router-link to="childpages01" append>子页面01</router-link>
                <router-link to="childpages02" append>子页面02</router-link>
                <router-view></router-view>
            </div>
        `,
    };
    let ChildPages01 = {
        template: `
            <div>
                <h1>我是子页面01</h1>
            </div>
        `,
    };
    let ChildPages02 = {
        template: `
            <div>
                <h1>我是子页面02</h1>
            </div>
        `,
    };
    let App = {
        template: `
            <div>
                <router-link :to="{ name: 'home' }">首页</router-link>
                <router-link :to="{ name: 'test' }">测试页面</router-link>
                <router-view></router-view>
            </div>
        `,
    };
    // 实例化一个router对象(本质上是将路径和页面内容绑定了对应关系)
    let router = new VueRouter({
        routes: [
            {
                name: 'home',
                path: '/',
                component: Home,
            },
            {
                name: 'test',
                path: '/test',
                component: Test,
                // children实现子路由(子页面)
                children: [
                    {
                        path: 'childpages01',
                        component: ChildPages01,
                    },
                    {
                        path: 'childpages02',
                        component: ChildPages02,
                    },
                ],
            },
        ],
    });
    new Vue({
        el: '#app',
        template: `<App/>`,
        // 在根实例中注册router对象
        router: router,
        components: {
            App,
        },
    });
</script>
</body>

示すように、テスト結果：
ここに画像を挿入説明
ここにだけ01回クリックするサブページは、表示されるコンテンツは、後者のパスが正常で、正常です。

以下は二回クリックされた：
ここに画像を挿入説明
ディスプレイの表示内容は、背後にある通常、正常ではないパスではありません- ==追加パラメータは紫が背後==ニュートラルパスに追加されました。

動的結合特性 - 子供は別の方法で使用することができる未満ページ応答フォローアップ訪問、その結果、最終的な表面へのパスを付加し続けるように、上記方法を使用して、パスは、ハードコードされたプロパティです。

ダイナミックな結合特性

==すなわち動的結合特性をサブルート名に、通常のスイッチングサブパスを達成するために、サブ経路コマンドを使用する。==

<body>
<div id="app"></div>
<script>
    // 在Vue根实例中使用VueRouter
    Vue.use(VueRouter);
    let Home = {
        template: `
            <div>
                <h1>我是首页</h1>
            </div>
        `,
    };
    let Test = {
        // 使用子路由命的名称来实现子路径的正常切换
        template: `
            <div>
                <h1>我是测试页面</h1>
                <router-link :to="{ name: 'childpages01' }">子页面01</router-link>
                <router-link :to="{ name: 'childpages02' }">子页面02</router-link>
                <router-view></router-view>
            </div>
        `,
    };
    let ChildPages01 = {
        template: `
            <div>
                <h1>我是子页面01</h1>
            </div>
        `,
    };
    let ChildPages02 = {
        template: `
            <div>
                <h1>我是子页面02</h1>
            </div>
        `,
    };
    let App = {
        template: `
            <div>
                <router-link :to="{ name: 'home' }">首页</router-link>
                <router-link :to="{ name: 'test' }">测试页面</router-link>
                <router-view></router-view>
            </div>
        `,
    };
    // 实例化一个router对象(本质上是将路径和页面内容绑定了对应关系)
    let router = new VueRouter({
        routes: [
            {
                name: 'home',
                path: '/',
                component: Home,
            },
            {
                name: 'test',
                path: '/test',
                component: Test,
                // children实现子路由(子页面)
                children: [
                    {
                        // 给子路径命名
                        name: 'childpages01',
                        path: 'childpages01',
                        component: ChildPages01,
                    },
                    {
                        // 给子路径命名
                        name: 'childpages02',
                        path: 'childpages02',
                        component: ChildPages02,
                    },
                ],
            },
        ],
    });
    new Vue({
        el: '#app',
        template: `<App/>`,
        // 在根实例中注册router对象
        router: router,
        components: {
            App,
        },
    });
</script>
</body>

==注：このメソッドは、コンポーネントの名前とパスの間の対応を見つけるために使用されている必要がありますが、==パスを使用することはできません。
***

ルートのアップグレード版の息子を追加

==動的結合特性を使用しながら、いわゆる事実のアップグレードバージョンを追加し、追加します。==

<body>
<div id="app"></div>
<script>
    // 在Vue根实例中使用VueRouter
    Vue.use(VueRouter);
    let Home = {
        template: `
            <div>
                <h1>我是首页</h1>
            </div>
        `,
    };
    let Test = {
        // append升级版：<router-link :to="{ name: 'childpages01' }" append>...</router-link>
        template: `
            <div>
                <h1>我是测试页面</h1>
                <router-link :to="{ name: 'childpages01' }" append>子页面01</router-link>
                <router-link :to="{ name: 'childpages02' }" append>子页面02</router-link>
                <router-view></router-view>
            </div>
        `,
    };
    let ChildPages01 = {
        template: `
            <div>
                <h1>我是子页面01</h1>
            </div>
        `,
    };
    let ChildPages02 = {
        template: `
            <div>
                <h1>我是子页面02</h1>
            </div>
        `,
    };
    let App = {
        template: `
            <div>
                <router-link :to="{ name: 'home' }">首页</router-link>
                <router-link :to="{ name: 'test' }">测试页面</router-link>
                <router-view></router-view>
            </div>
        `,
    };
    // 实例化一个router对象(本质上是将路径和页面内容绑定了对应关系)
    let router = new VueRouter({
        routes: [
            {
                name: 'home',
                path: '/',
                component: Home,
            },
            {
                name: 'test',
                path: '/test',
                component: Test,
                // children实现子路由(子页面)
                children: [
                    {
                        // 给子路径命名
                        name: 'childpages01',
                        path: 'childpages01',
                        component: ChildPages01,
                    },
                    {
                        // 给子路径命名
                        name: 'childpages02',
                        path: 'childpages02',
                        component: ChildPages02,
                    },
                ],
            },
        ],
    });
    new Vue({
        el: '#app',
        template: `<App/>`,
        // 在根实例中注册router对象
        router: router,
        components: {
            App,
        },
    });
</script>
</body>

非追記のサブルーティング

<body>
<div id="app"></div>
<script>
    // 在Vue根实例中使用VueRouter
    Vue.use(VueRouter);
    let Home = {
        template: `
            <div>
                <h1>我是首页</h1>
            </div>
        `,
    };
    let Test = {
        template: `
            <div>
                <h1>我是测试页面</h1>
                <router-link to="/test/childpages01">子页面01</router-link>
                <router-link to="/test/childpages02">子页面02</router-link>
                <router-view></router-view>
            </div>
        `,
    };
    let ChildPages01 = {
        template: `
            <div>
                <h1>我是子页面01</h1>
            </div>
        `,
    };
    let ChildPages02 = {
        template: `
            <div>
                <h1>我是子页面02</h1>
            </div>
        `,
    };
    let App = {
        template: `
            <div>
                <router-link :to="{ name: 'home' }">首页</router-link>
                <router-link :to="{ name: 'test' }">测试页面</router-link>
                <router-view></router-view>
            </div>
        `,
    };
    // 实例化一个router对象(本质上是将路径和页面内容绑定了对应关系)
    let router = new VueRouter({
        routes: [
            {
                name: 'home',
                path: '/',
                component: Home,
            },
            {
                name: 'test',
                path: '/test',
                component: Test,
                // children实现子路由(子页面)
                children: [
                    {
                        // 子路由之非append(写全路径)
                        path: '/test/childpages01',
                        component: ChildPages01,
                    },
                    {
                        // 子路由之非append(写全路径)
                        path: '/test/childpages02',
                        component: ChildPages02,
                    },
                ],
            },
        ],
    });
    new Vue({
        el: '#app',
        template: `<App/>`,
        // 在根实例中注册router对象
        router: router,
        components: {
            App,
        },
    });
</script>
</body>

ルートリダイレクション

<body>
<div id="app"></div>
<script>
    // // 在Vue根实例中使用VueRouter
    Vue.use(VueRouter);

    let Home = {
        template: `
            <div>
                <h1>我是首页</h1>
            </div>
        `,
    };
    let Login = {
        template: `
            <div>
                <h1>我是登陆页面</h1>
            </div>
        `,
    };
    let Pay = {
        template: `
            <div>
                <h1>我是支付页面</h1>
            </div>
        `,
    };
    let App = {
        template: `
            <div>
                <router-link :to="{ name: 'home' }">首页</router-link>
                <router-link :to="{ name: 'login' }">登陆</router-link>
                <router-link :to="{ name: 'pay' }">支付</router-link>
                <router-view></router-view>
            </div>
        `,
    };
    // 实例化一个router对象(本质上是将路径和页面内容绑定了对应关系)
    let router = new VueRouter({
        routes: [
            {
                name: 'home',
                path: '/',
                component: Home,
            },
            {
                name: 'login',
                path: '/login',
                component: Login,
            },
            {
                name: 'pay',
                path: '/pay',
                // 使用redirect实现路由重定向
                // 把a标签的锚点值和页面内容绑定了对应关系
                redirect: '/login',
                component: Pay,
            },
        ],
    });
    new Vue({
        el: '#app',
        template: `<App/>`,
        // 在根实例中注册router对象
        router: router,
        components: {
            App,
        }
    });
</script>
</body>

我々は、支払いのためのリンクをクリックしたときのコードとして、ランディングページにジャンプします。

手動ルーティング

<body>
<div id="app"></div>
<script>
    // 在Vue根实例中使用VueRouter
    Vue.use(VueRouter);

    let Home = {
        template: `
            <div>
                <h1>我是首页</h1>
            </div>
        `,
    };
    let Test = {
        template: `
            <div>
                <h1>我是测试页面</h1>
            </div>
        `,
    };
    let App = {
        // 使用v-on(简写为@)给按钮绑定一个事件
        template: `
            <div>
                <router-link to="/">首页</router-link>
                <button @click="myClick">点击跳转至测试页面</button>
                <router-view></router-view>
            </div>
        `,
        // 定义一个用于跳转至测试页面的的事件
        methods: {
            myClick: function () {
                this.$router.push('/test');
            }
        },
    };
    // 实例化一个router对象(本质上是将路径和页面内容绑定了对应关系)
    let router = new VueRouter({
        routes: [
            {
                path: '/',
                component: Home,
            },
            {
                path: '/test',
                component: Test,
            },
        ],
    });
    new Vue({
        el: '#app',
        template: `<App/>`,
        // 在根实例中注册router对象
        router: router,
        components: {
            App,
        }
    });
</script>
</body>

コードとして、テストページにジャンプし、ボタンをクリックしてください。

ルーティングフック

<body>
<div id="app"></div>
<script>
    // 在Vue根实例中使用VueRouter
    Vue.use(VueRouter);
    let Home = {
        template: `
            <div>
                <h1>我是首页</h1>
            </div>
        `,
    };
    let Login = {
        template: `
            <div>
                <h1>我是登陆页面</h1>
            </div>
        `,
    };
    let Pay = {
        template: `
            <div>
                <h1>我是支付页面</h1>
            </div>
        `,
    };
    let App = {
        template: `
            <div>
                <router-link :to="{ name: 'home' }">首页</router-link>
                <router-link :to="{ name: 'login' }">登陆</router-link>
                <router-link :to="{ name: 'pay' }">支付</router-link>
                <router-view></router-view>
        `,
    };
    // 实例化一个router对象(本质上是将路径和页面内容绑定了对应关系)
    let router = new VueRouter({
        routes: [
            {
                name: 'home',
                path: '/',
                component: Home,
            },
            {
                name: 'login',
                path: '/login',
                component: Login,
            },
            {
                name: 'pay',
                path: '/pay',
                // 这一步骤将调用路由钩子函数(通过布尔值来判断是否调用该钩子函数)
                meta: {required_login: true},
                component: Pay,
            },
        ],
    });
    // 定义一个路由钩子函数
    // 通过router对象的beforeEach(function (to, form, next) {})
    router.beforeEach(function (to, from, next) {
        // to:从哪来
        // from:到哪去
        // next:下一步做什么
        console.log('to:', to);
        console.log('from:', from);
        console.log('next:', next);
        if (to.meta.required_login) {
            next('/login');
        } else {
            next();  // 正常跳转
        }
    // router.afterEach(function (to, from) { ··· });
    new Vue({
        el: '#app',
        template: `<App/>`,
        // 在根实例中注册router对象
        router: router,
        components: {
            App,
        }
    });
</script>
</body>

コードとしては、フック関数によって、彼らが支払うのリンクをクリックすると、リンク先のページにジャンプするルーティング機能を実現しています。

パスに「＃」を削除

属性ルータインスタンス化されたオブジェクトの追加：==モード：「歴史」==は、プロパティは「＃」であってもよいが表示されるパスが削除されます。

<body>
<div id="app"></div>
<script>
    // 在Vue根实例中使用VueRouter
    Vue.use(VueRouter);
    let Home = {
        template: `
            <div>
                <h1>我是首页</h1>
            </div>
        `,
    };
    let Login = {
        template: `
            <div>
                <h1>我是登陆页面</h1>
            </div>
        `,
    };
    let Pay = {
        template: `
            <div>
                <h1>我是支付页面</h1>
            </div>
        `,
    };
    let App = {
        template: `
            <div>
                <router-link :to="{ name: 'home' }">首页</router-link>
                <router-link :to="{ name: 'login' }">登陆</router-link>
                <router-link :to="{ name: 'pay' }">支付</router-link>
                <router-view></router-view>
        `,
    };
    // 实例化一个router对象(本质上是将路径和页面内容绑定了对应关系)
    let router = new VueRouter({
        // 使用mode: 'history'实现取去掉路径中显示的"#"号
        mode: 'history',
        routes: [
            {
                name: 'home',
                path: '/',
                component: Home,
            },
            {
                name: 'login',
                path: '/login',
                component: Login,
            },
            {
                name: 'pay',
                path: '/pay',
                component: Pay,
            },
        ],
    });
    new Vue({
        el: '#app',
        template: `<App/>`,
        // 在根实例中注册router对象
        router: router,
        components: {
            App,
        }
    });
</script>
</body>

オリジナル：http://106.13.73.98/__/55/

おすすめ

転載: www.cnblogs.com/gqy02/p/11314009.html
おすすめ
中国人プログラマーの「35歳の呪い」
Lanya CorelDRAW プラグイン 2024.5.1 国際労働者の日バージョン、無料ダウンロード
ランキング
ループコントローラ
スピーカーの分類（スピーカーDiarisation）
雑音除去空気とフロートを除去するための統計的フィルタリング方法を使用して
Spring Cloudプロジェクトの構築（5）
Echarts去掉图形后面的网格线
【レジャー・楽しみ】C言語でクリスマスツリーを描く方法
ゲームが反映するように、後に＃589（本部2）ラウンドCodeforces
アレイの重複排除について知っているソリューションはいくつありますか？
NetBackupの証明書の有効期限は-nBuエラー8506に近づきます
Dockerコンテナの起動パラメータを表示する
アーカイブ
もっと
2024-05-04(18)
2024-05-03(8)
2024-05-02(0)
2024-05-01(4)
2024-04-30(35)
2024-04-29(5)
2024-04-28(12)
2024-04-27(29)
2024-04-26(22)
2024-04-25(31)

コードワールド

© 2018 codetd.com