Vue ノート - ルーティングの基本的な使用法

パラメータ

to: 入るルーティング オブジェクト
from: 出るルーティング オブジェクト
next() 操作が完了したことを確認し、最後に呼び出す必要があります。そうしないと、ルーティングは回線切り替えを実行しません

最初のステップ: ガイド パッケージ

    <script src="../vue-router-3.0.1.js"></script>

ステップ 2: ルーティング コンポーネントを作成する

        var login = {
            template: '<h3>这是 登录 子组件</h3>'
        }
        var register = {
            template: '<h3>这是 注册 子组件</h3>'
        }

ステップ 3: ルーティング オブジェクトを作成する

        var router = new VueRouter({
            routes:[    //路由规则数组,动态路由
                {path:'/',redirect:'login'},    //给路径一个重定向
                {path:'/login',component:login},
                {path:'/register',component:register}
            ],
            linkActiveClass:'myactive'  //和激活相关的类
        })

構造レイアウト

ここで jump タグをクリックしてジャンプすると router-link はコンポーネントであり、デフォルトではリンク付きのタグとしてレンダリングされ、リンクのアドレスは to 属性で指定されます

<div id="app">
        <router-link to='/login'>登录</router-link>
        <router-link to='/register'>注册</router-link>
        <!--容器-->
        <router-vue></router-vue>
    </div>
    <script>
		//创建Vue实例，得到ViewModel
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {},
            router
        })
    </script>