vue-router的基本使用

vue-router的基本使用

****1.导入文件

    <!-- 先导入vue文件 -->
    <script src="./lib/vue_2.5.22.js"></script>
    <!-- 再导入vue-router文件 -->
    <script src="./lib/vue-router_3.0.2.js"></script>

****2.添加路由链接

  <router-link to="/user">User</router-link>
  <router-link to="/register">Register</router-link>

router-link是vue提供的标签，默认会被渲染为a标签
to属性默认被渲染为href属性且to属性的默认值会渲染为#开头的hash地址

****3.添加路由填充位

  <router-view></router-view>

也称路由占位符，将来通过路由规则匹配到组件，渲染到router-view所在位置

4.定义路由组件

        const User = {
            template: '<h1>User组件</h1>'
        }

****5.配置路由规则并创建路由实例

        const router = new VueRouter({
            //所有的路有规则
            routes: [
                { path: '/user', component: User },
                {
                    path: '/register', component: Register, children: [{
                        path: '/register/tab1', component: Tab1,
                    },
                    {
                        path: '/register/tab2', component: Tab2,
                    }]
                },
            ]
        })

****6.把路由挂载到vue实例中

   const vm = new Vue({
            el: '#app',
            data: {},
            router: router,

        })