Vue路由学习笔记

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:跳转的路径，对应路径中#/后面的那串字符，如下图所示：

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>