vue路由vue-router

什么是路由

后端路由

对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上的资源

前端路由

对于单页面应用程序来说，主要通过URL中的hash(#)来实现不同页面的切换，hash有一个特点，HTTP请求中不会包含hash相关的内容。所以单页面程序中的页面跳转主要用hash实现。这种通过hash改变来切换页面的方式叫做前端路由。

路由的基本使用

 

<div id="app">
    <!-- 5添加链接 -->
    <router-link to="/login">登录</router-link>
    <router-link to="/register">注册</router-link>
    <!-- 4、在页面上添加路由展示占位符-->
    <router-view></router-view>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<!-- 1.引入 -->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
    //组件模板对象
    var login = {
        template: '<h1>登录组件</h1>'
    }
    var register = {
        template: '<h1>注册组件</h1>'

    }
    // 2、导入vue-router包之后，在window全局对象中，就有了一个路由的构造函数VueRouter
    var routerObj = new VueRouter({
        routes: [    //路由匹配规则
            // 每个路由规则都是一个对象，这个规则对象身上有两个必须的属性
            //属性1： path 表示监听的路由链接地址
            //属性2： component表示监听路由所对应的组件。
            //component属性值必须是一个组件对象，不能是组件名称
            { path: '/login', component: login },
            { path: '/register', component: register }
        ]
    })
    //3、将路由规则对象注册到vm实例上
    new Vue({
        el: '#app',
        router: routerObj
    })
</script>