Vue学习笔记（七）路由

对于大多数单页面应用，都推荐使用官方支持的 vue-router 库。下面的代码默认导入了vue-router 库

路由的基本使用

---

在Vue中，使用new VueRouter来创建一个路由，在Vue实例中将该路由放入Vue实例中的myRouter，即在某个实例上创建了一个路由。

let login = {
    template: '
this is login
'
}


let myRouter = new VueRouter({
    routes: [{
        path: '/login',
        component: login
    }]
})

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

在该实例所对应的html元素中，使用可以用来显示路由对应的模板，根据上面的代码，当hash为/login时就会显示login模板中的内容，html代码如下

渲染后为

 
    
this is login

路由的切换

---

路由可以通过router-link标签的to属性来切换，to属性的值为要切换到的hash。

    login
    register
    

页面渲染为下

    login 
    register 
    

当点击login时就会显示hash为/login路由的模板，而点击register时就会显示hash为/register路由的模板。点击后为下

// 点击login

    login 
    register 
    
this is login



// 点击register

    login 
    register     
    
this is register

切换的标签设置

可以注意到，当渲染到页面的时候，router-link标签变成了a标签，这是默认下的渲染方式，我们也可以通过其tag属性手动设置渲染后的标签，tag属性的值为渲染后的标签

    login
    register
    

渲染后为

    login 
    
register
 
    

可以看到两个标签不再是a标签了，而是手动设置的span标签和p标签。

切换的高亮

可以注意到，在点击router-link改变路由时，被点击的元素的class发生了改变，多了router-link-exact-active和router-link-active两个class类选择器，我们可以通过这两个选择器来设置切换时的元素的高亮

通过这样设置，在切换路由时，当前路由对应的router-link标签就会多了个color:red的样式。

这个路由高亮的类选择器名比较长，我们通过在路由构建时多添加一个linkActiveClass属性可以自定义一个类选择器名来使用，linkActiveClass属性的值即为高亮时的类选择器样式名。

let myRouter = new VueRouter({
    routes: [{
        path: '/login',
        component: login
    }, {
        path: '/register',
        component: register
    }],
    linkActiveClass: "myActive"
})

这样设置后，高亮的类选择器名就变成了myActive。

路由的重定向

有时候我们希望在一打开页面时就跳转到另一个hash的页面，可以使用路由的重定向。在构建路由时，在routes属性中通过设置一个path为'/'的对象，给其设置redirect属性，值就为重定向所到的hash。

let myRouter = new VueRouter({
    routes: [{
        path: '/',
        redirect: '/login'
    }, {
        path: '/login',
        component: login
    }, {
        path: '/register',
        component: register
    }],
    linkActiveClass: "myActive" 
})

这里一打开页面就会先跳转到hash为'/login'的页面。

路由的参数

---

路由传递参数有两种方式

通过query方式传递

通过query方式传递只要在router-link标签的to属性的值后面加上?键值=键名即可。在调用时通过$route.query.键名来调用。

    login
    register
    

通过params方式传递

与使用query方式传递不同，使用params传递时，要在构建路由实例的时候设置传递的键名，在router-link中设置传递的键值。在调用时是通过$route.params.键名来调用的。

    
    login
    register
    

params传递的参数是从path属性中解析出来的，这与query方式传递不同，使用query方式传递时path中并不会出现参数。可以在打印出来的$route中查看属性。

命名路由的使用

---

除了上面的使用方法，也可以通过名称来标识一个路由以达到方便的效果，使用命名路由也可以简单地传递参数。

    
    login
    register
    

路由的嵌套

---

实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件。要让router-view中嵌套其他的router-view，需要在VueRouter实例中设置children参数。

    access
    

路由命名视图

---

如果要在同一个路由下展示多个视图，而不是嵌套展示，可以使用路由的命名视图来实现。在上面代码中，每个path都对应一个component，而如果我们要使用路由的命名视图，我们要用到的是components来传入一个对象，对象中有多个模板，键名为router-view的name属性对应的值，而键值为对应的模板。

使用watch监听路由的改变

---

路由地址的改变可以通过watch来监听，watch的具体用法可见Vue学习笔记（六）计算属性和监听属性

    登录
    注册