Vue路由学习笔记

时间：2021-01-28 16:33:37

Vue路由大致分为6个步骤：

1.引用vue-router

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

2.安装插件

Vue.use(VueRouter);

3.创建一个路由对象

 var router = new VueRouter({

    //这里面配置路由对象

});

4.配置路由对象

name:路由名称，在 router-link 只需要通过 :to={name:'变量名'}  指定跳转的地址；
path:跳转的路径，对应路径中#/后面的那串字符，如下图所示：
Vue路由学习笔记

component:指定要更换的组件

routes:[

    {name:'***',path:'***',component:***}

]

5.将配置好的路由关联到vue实例中

router:router,

6.指定路由改变局部的位置

 
 
具体实例：
<!DOCTYPE html>

<html lang="en">

<head>

    <title>router-link</title>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

    <div id="app">

    </div>

    <script src="https://cdn.bootcss.com/vue/2.5.15/vue.js"></script>

    <!-- 1.引用vue-router -->

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

    <script>

        var Login = {

            template:`<div>我是登录页面</div>`

        }

        var Register = {

            template:`<div>我是注册页面</div>`

        }

        // 2.安装插件

        Vue.use(VueRouter);

        // 3.创建一个路由对象

        var router = new VueRouter({

            // 4.配置路由对象

            routes:[

                //对象有了name就等于有了变量名,第6步中router-link 只需要通过 :to={anme:'变量名'} 就可以了

                {name:'login',path:'/login',component:Login},

                {name:'register',path:'/register',component:Register}

            ]

        });

        //6.指定路由改变局部的位置

        var App = {

            template:`

                <div>

                    <router-link to="/login">登录</router-link>

                    <router-link :to="{ name:'login' }">登录</router-link>

                    <router-view></router-view>

                </div>

            `

        }

        //5.将配置好的路由关联到vue实例中

        var vm = new Vue({

            el: '#app',

            router:router,

            components: {

                app:App

            },

            template:`<app></app>`

        });

    </script>

</body>

</html>

相关文章