vue笔记篇-路由基本的使用

参数

to：将进⼊入的路由对象
from：将离开的路由对象
next() 确认完成操作，最后一定要调用，不然路路由就不会进行行切换

第一步：导包

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

第二步：创建路由组件

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

第三步：创建一个路由对象

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

结构布局

通过点击这里跳转标签去跳转router-link是一个组件,它默认会被渲染成一个带有链接的a标签,通过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>