Vue.js核心技术解析与uni-app跨平台实战开发学习笔记

第6章 Vue.js路由

6.3 路由重定向以及动画路由

6.3.1 路由重定向

在前面的栗子中，只有当路径是/login或者/register时才会显示组件，初次加载页面，组件是空白的，像下面这样

因此，可以设置路由重定向，当初次加载页面时，定位到登录组件。

这样，初识加载页面也会进行路径跳转，自动进入登录组件。

redirect属性值是路径地址，并不是组件的名字。

6.3.2 动画路由

使用路由可以添加动画。

两步：

1. 使用transition包裹需要添加动画的元素
2. 添加两组类样式

运行效果：

OK

6.4 路由传参

组件之间的切换通常会携带参数。两种形式

6.4.1 传参方式一

在router-link超链接标签中传递参数。

登录组件：

var login = {
    template: '
登录---{{id}}
',
    data(){
        return {
            id : null
        }
    },
    //组件和Vue实例一样，有生命周期
    created(){
        //路由参数的传递都在this.$route中
        console.log(this.$route)
        console.log(this.$route.query.id)
        //将获取到的参数赋值给组件中的id属性
        this.id = this.$route.query.id
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

运行效果：

6.4.2 传参方式二

修改匹配规则。

修改匹配规则

运行效果