Vue Router 实战-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_38845858/article/details/90210972

## 什么是路由
1. 对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源；

2. 对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；

3. 在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）；

## 在 vue 中使用 vue-router
1. 导入 vue-router 组件类库：
```

<script src="./lib/vue-router-2.7.0.js"></script>
```
2. 使用 router-link 组件来导航
```

<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
```
3. 使用 router-view 组件来显示匹配到的组件
```

<router-view></router-view>
```
4. 创建使用`Vue.extend`创建组件
```
    // 4.1 使用 Vue.extend 来创建登录组件
    var login = Vue.extend({
      template: '<h1>登录组件</h1>'
    });

    // 4.2 使用 Vue.extend 来创建注册组件
    var register = Vue.extend({
      template: '<h1>注册组件</h1>'
    });
```
5. 创建一个路由 router 实例，通过 routers 属性来定义路由匹配规则
```
// 5. 创建一个路由 router 实例，通过 routers 属性来定义路由匹配规则
    var router = new VueRouter({
      routes: [
        { path: '/login', component: login },
        { path: '/register', component: register }
      ]
    });
```
6. 使用 router 属性来使用路由规则
```
// 6. 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      router: router // 使用 router 属性来使用路由规则
    });
```

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../lib/vue-2.4.0.js"></script>
    <script src="../lib/vue-router-3.0.1.js"></script>
    <style>
        .my {
            font-size: 100px;
            color: pink
        }

        /*.router-link-active{*/
        /*    font-size: 100px;*/
        /*    color:pink*/
        /*}*/
        .v-enter,
        .v-leave-to {
            opacity: 0;
            transform: translateX(100px);
        }

        .v-enter-active,
        .v-leave-active {
            transition: all 1s ease;
        }

    </style>
</head>
<body>
<div class="app">
    <!--    使用router-link进行导航，这里的router-link相当于a链接，只不过router给router-link加了自定义样式属性-->
    <!--    -----;到哪去-->
    <router-link to="/login">登录</router-link>
    <router-link to="/resiger">注册</router-link>
    <!--   使用router-view组件来显示匹配到的组件-->
    <transition mode="out-in">
        <router-view></router-view>

    </transition>
</div>
</body>
<script>
    // 创建组件
    // 3：组件在这里找到了
    var login = {
        template: "<h3>登录</h3>"
    }
    var resiger = {
        template: "<h3>注册</h3>"
    }
    // 创建路由实例
    var router = new VueRouter({
        // 以数组对象的形式,通过routers属性来定义路由匹配规则
        routes: [
            //路由重定向，指定一开始的路劲
            // -------2：到这里了，然后找组件
            {path: '/', redirect: '/login'},
            {path: '/login', component: login},
            {path: '/resiger', component: resiger}
        ],
        //通过linkActiveClass，修改默认样式，
        linkActiveClass: "my"
    })
    var vm = new Vue({
        el: ".app",

        data: {
            msg: "大家好,我是父组件的数据"

        },
        methods: {},
        // 4：使用router属性来使用路由规则
        router

    })
</script>
</html>

组件传参----组件传参两种方式： queyr,parmas

使用生命周期函数的钩子函数

$route --可以获取信息，进而获取到你想要的参数--无非是一些路劲~

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../lib/vue-2.4.0.js"></script>
    <script src="../lib/vue-router-3.0.1.js"></script>
    <style>


    </style>
</head>
<body>
<div class="app">
//    <router-link to="/login?id=10">登录{{$route.query.id}}</router-link>
    <router-link to="/login/12">登录</router-link>

    <router-link to="/resiger">注册</router-link>
    <router-view></router-view>
</div>
</body>
<script>
    var login = {
        template: "<h3>登录</h3>",
        // 组件的生命周期钩子函数
        created(){
//            console.log(this.$route.query.id)
console.log(this.$route.parmas.id)

        }
    }
    var resiger = {
        template: "<h3>注册</h3>"
    }
    var router = new VueRouter({
        routes: [
            {
                path: '/', redirect: "/login"
            },
            {
//                path: "/login", component: login
                path: "/login/:id", component: login


            },
            {
                path: "/resiger", component: resiger
            }
        ]
    })
    var vm = new Vue({
        el: ".app",

        data: {
            msg: "大家好,我是父组件的数据"

        },
        methods: {},
        // 4：使用router属性来使用路由规则
        router:router

    })
</script>
</html>

路由的嵌套

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../lib/vue-2.4.0.js"></script>
    <script src="../lib/vue-router-3.0.1.js"></script>
</head>

<body>
<div id="app">

    <router-link to="/account">Account</router-link>

    <router-view></router-view>

</div>

<template id="tmpl">
    <div>
        <h1>这是 Account 组件</h1>

        <router-link to="/account/login">登录</router-link>
        <router-link to="/account/register">注册</router-link>

        <router-view></router-view>
    </div>
</template>

<script>

    // 组件的模板对象
    var account = {
        template: '#tmpl'
    }

    var login = {
        template: '<h3>登录</h3>'
    }

    var register = {
        template: '<h3>注册</h3>'
    }

    var router = new VueRouter({
        routes: [
            {
                path: '/account',
                component: account,
                // 使用 children 属性，实现子路由，同时，子路由的 path 前面，不要带 / ，否则永远以根路径开始请求，这样不方便我们用户去理解URL地址
                children: [
                    {path: 'login', component: login},
                    {path: 'register', component: register}
                ]
            }

        ]
    })

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        router
    });
</script>
</body>

</html>

watch