Vue中的路由

什么是路由

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

在 vue 中使用 vue-router

1. 导入路由模块
<script src="lib/vue-router-3.0.1.js"></script>

2. 创建组件模板对象

let login = {
        template: '<h1>登录组件</h1>'
    }
    let register = {
        template: '<h1>注册组件</h1>'
    }

3.创建路由对象

 let router = new VueRouter({
        //路由匹配规则
        routes: [
            /*
            * 每一个规则都是一个对象，必须要有两个属性
            * 属性1： path 表示你要监听的路径
            * 属性2： component 表示要展示对应的组件----注意：写的是组件的模板对象名，而不是组件名！！！
            * */
            {path:'/',redirect:'/login'},//根路径下，又重定向/login路径所对应的组件
            {path: '/login', component: login},
            {path: '/register', component: register}
        ],
        //②全局配置点击高亮显示的类
        linkActiveClass: 'myActive'
    });

    let vm = new Vue({
        el: '#app',
        data: {},
        methods: {},

}

4. 将路由对象注册到vm实例中，这样就可以监听url地址的变化
        // router:router
        router
        //5. 使用router-link导航和router-view来渲染----在dom层操作
    });

6.在顶部body部分嵌入

<div id="app">

    <!--<a href="#/login">登录</a>-->
    <!--5.1 使用router-link导航
        to：相当于a标签的href路径
        router-link在页面中会被渲染成a标签
    -->
    <router-link to="/login" tag="span">登录</router-link>
    <router-link to="/register">注册</router-link>

    <!--5.2 使用 router-view 组件来显示匹配到的组件-->
    <router-view></router-view>
</div>

路由传值：
1. router-link设置  ?id=123&name=zhagnsan
获取数据  通过路由对象 this.$route.query对象获取
2.  路由匹配规则后规定  /:id/:name
router-link设置 /id值/name值
获取数据：  通过路由对象 this.$route.params对象获取