vue之路由

vue-router的写法

• 准备组件
• 实例化路由规则对象
• 开启路由对象
• 写router-link标签匹配路由
• 写router-view占位符，组件的内容会替换掉占位符

例：

<div id="app">
    <!-- 4、写router-link标签 -->
    <router-link to="/login">登录</router-link>
    <router-link to="/register">注册</router-link>
    <!-- 5、写router-view占位符，组件的内容会替换掉占位符 -->
    <router-view></router-view>
</div>
<script>
    // 1、准备组件（一个空的组件 + 自定义的其他组件）
    let App = Vue.extend({});

    let login = Vue.extend({
        template: "<h1>登录</h1>",
    });

    let register = Vue.extend({
        template: "<h1>注册</h1>",
    });
    // 2、实例化路由规则对象
    let router = new VueRouter({
        routes: [
            {path: "/", redirect: "/login"},             // 只要是到了/路径就会自动跳转到/login
            {path: "/login", component: login},          // 通过/login匹配login组件
            {path: "/register", component: register},    // 通过/register匹配register组件
        ]
    });
    // 3、开启路由对象
    new Vue({
        el: "#app",
        router: router,
    })
</script>　　

路由传参

• 在router-link中的url中添加上 / 参数值
• 在实例化路由规则对象的时候使用 /:参数名 指明参数，可以指定多个，通过 / 区分
• 在组件中通过 this.$route.params.参数名 获取url中传过来的值

例：

<!-- 在router-link中的url中添加上 /参数值 -->
<router-link to="/register/test">注册</router-link>

// 在组件中通过 this.$route.params.参数名 获取url中传过来的值
let register = Vue.extend({
    template: "<h1>注册{{ name }}</h1>",
    data (){
        return{
            name: ""
        }
    },
    created (){
        this.name = this.$route.params.myname;
    }
});

// 在实例化路由规则对象的时候使用 /:参数名 指明参数，可以指定多个，通过 / 区分
let router = new VueRouter({
    routes: [
        {path: "/register/:myname", component: register},    // 通过/register匹配register组件
    ]
});

路由的嵌套写法

路由的嵌套只需要在定义路由规则的时候将子路由放到父路由的children下面即可

<div id="app">
    <!-- 4、写router-link标签 -->
    <router-link to="/account/login">登录</router-link>
    <router-link to="/account/register">注册</router-link>
    <!-- 5、写router-view占位符，组件的内容会替换掉占位符 -->
    <router-view></router-view>
</div>
<script>
    // 1、准备组件（一个空的组件 + 自定义的其他组件）
    let App = Vue.extend({});

    let login = Vue.extend({
        template: "<h1>登录</h1>",
    });

    let register = Vue.extend({
        template: "<h1>注册</h1>",
    });

    let account = Vue.extend({
        template: "<div><h1>账号</h1><router-view></router-view></div>",
    });
    // 2、实例化路由规则对象
    let router = new VueRouter({
        routes: [
            {
                path: "/account",
                component: account,
                children: [
                    {
                        path: "login",      // 子组件前面不需要/
                        component: login,
                    },
                    {
                        path: "register",
                        component: register,
                    }
                ],
            },
        ]
    });
    // 3、开启路由对象
    new Vue({
        el: "#app",
        router: router,
    })
</script>

路由缓存keep-alive

在两个路由进行切换的时候，其实是在切换两个组件，如果从上一个组件切换到下一个组件，然后再切换回去，那么不管是从上一个切换到下一个还是切换回去，vue都会重新渲染一遍对应的组件，如果在网速慢的时候，组件的渲染很慢，就会造成用户的体验差，那么我们希望的是能够在切换到下一个组件的时候将上一个组件保存在内存中，那么当切换回去的时候我们就可以直接去内存里面拿到数据进行直接渲染，优化用户体验

实现这一操作的技术叫做keep-alive，什么是keep-alive，其实就是一个标签，套在对应的router-view上即可将该路由对应的组件缓存了

<keep-alive>
    <router-view></router-view>
</keep-alive>