Vue notes - basic use of routing

parameter

to: the routing object that will enter
from: the routing object that will leave
next() Confirm the operation is complete, and it must be called at the end, otherwise the routing will not perform line switching

The first step: guide package

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

Step 2: Create a routing component

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

Step 3: Create a routing object

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

Structure layout

By clicking the jump tag here to jump router-link is a component, which will be rendered as an a tag with a link by default, and the address of the link is specified through the to attribute

<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>