Vue学习之路由(Router)

Vue学习之 路由(Router)

---

一、路由是什么？

在计算机网络原理中，路由是指路由器从一个接口上收到数据包，根据数据包的目的地址进行定向并转发到另一个接口的过程。可以想象为快递转运站，根据包裹的地址信息将快递送到指定地点。

在web中的路由也是类似的，route根据url的不同来跳转到相应的url页面

Vue提供了路由的组件Vue Router

---

二、Vue Router的安装

1.直接下载/CDN

资源地址：https://unpkg.com/vue-router/dist/vue-router.js

2.NPM安装

npm install vue-router

三、路由的基础使用

1.定义路由组件

路由要有映射的组件

let myA = {
            template:
                `
                <div>A组件</div>
            `
        }

        let myB = {
            template:
                `
                <div>B组件</div>
            `
        }

2.定义路由

    let routes = [
    		 {
                path: '/',
                component: myA,
                //路由重定向
                redirect: '/a',
                //redirect: { name: 'aRoute' }，

            },
            {
                path: '/a',
                component: myA，
                name: 'aRoute',
                alias: '/aa',
            },
            {
                path: '/b',
                component: myB
            }
        ];

一个最基础的路由对象有这两个属性：

path：路由地址
component：映射的组件

除此之外，Router还有一些其他属性

name：名称，可方便以后的跳转
alias：别名，可以通过别名来访问路由
redirect：路由重定向，比如你想让组件一开始就在某个路由上，就可以用重定向。
当用户访问 /时，URL 将会被替换成 /a，然后匹配路由为 /a.

3. 创建Router实例

//2.创建路由器对象
        let router = new VueRouter({
            routes: routes
        })

4.注册路由

 new Vue({
            el: '#app',
            router: router,
            data: {
                msg: 'hello'
            },
            methods: {},
        })

这里的router就是用来注册路由器的。

5.使用路由

<div id='app'>
        <!-- 使用路由 -->
        <div>
            <router-link to="/a">去A路由</router-link>
            <router-link to="/b">去B路由</router-link>
            <a href="#/a">a标签去A路由</a>
        </div>
        <div>
            <!-- 组件显示的位置 -->
            <router-view>

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

这里 <router-link></router-link>的显示效果和a标签是一样。你同样可以是啊标签来进行路由的跳转

---

四、动态路由

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来显示不同的内容。那么，我们可以使用动态路由

1.动态匹配

  {
      path: '/user/id/:id/username/:username'，
      component: myA，
   },

动态路由在路由地址上使用冒号来接受数值。

<router-link to="/user/id/1/username/zhangsan">去A路由</router-link>

当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。

2.响应路由参数的变化

如果我们想要页面根据路由路径参数的不同去做相应的变化，可以有几种方式
最简单就是watch监听

<div id='app'>
        <!-- 使用路由 -->
        <div>
            <router-link to="/user/id/1/username/zhangsan">去A路由</router-link>
            <router-link to="/b">去B路由</router-link>
        </div>
        <div>
            <router-view></router-view>
        </div>
    </div>
    <script>

        let myA = {
            data() {
                return {
                    id: null,
                    username: ''
                }
            },
            template:
                `
                <div>A组件{{id}}--{{username}}</div>
            `,  
            //监听
             watch: {
                 $route(to, from) {
                     // to是新路由，from是旧路由   
                     // console.log(to, from);
                     this.id = to.params.id;
                     this.username = to.params.username;
                 }
             }
        }
        let myB = {
            template:
                `
                <div>B组件</div>
            `
        }
        let routes = [
            {
                path: '/user/id/:id/username/:username',
                component: myA
            },
            {
                path: '/b',
                component: myB
            }
        ];
        let router = new VueRouter({
            routes: routes
        })
        new Vue({
            el: '#app',
            router: router,
            data: {
                msg: 'hello'
            },
            methods: {},
        })
    </script>
 

监听是Vue中的方法，Vue router还提供了路由守卫(也叫导航守卫)，路由守卫是专门用来监听路由的

---

五.路由守卫

1.全局守卫

全局守卫定义在全局作用域中，所有的路由变化都会触发该守卫
全局守卫有两种：前置和后置，分别在路由改变前后执行

		//前置守卫
        router.beforeEach((to, from, next) => {
            console.log(to, from, next, '-----beforeEach-----');
            next();
        })
		//后置守卫
        router.afterEach((to, from) => {
            console.log(to, from, '------afterEach------');
        })

两者都有 to 和 from,to是新路由 ,from是旧路由。
需要注意的是，前置守卫有next函数，这个函数是用来执行到下一步的，如果在前置守卫中没有next，则无法执行下一步。

2.路由独享守卫

路由独享守卫写在路由对象内部,只有在该路由内有路由变化才会触发

let routes = [
            {
                path: '/b',
                component: myB,
                // 设置路由独享守卫
                beforeEnter(to, from, next) {
                    console.log(to, from, next, '------beforeEnter------');
                    next();
                }
            }
        ];

3.组件内部守卫

组件内守卫写在组件内部，只有在该组件的路由变化才会触发该守卫
组件内守卫有三种，分别在进入路由、更新路由、离开路由时触发

let myA = {
            template:
                `
                <div>A组件</div>
            `,
            // 2.3 组件内守卫
            beforeRouteEnter(to, from, next) {
                console.log('------beforeEnter------');
                next();
            },
            beforeRouteUpdate(to, from, next) {
                console.log('------RouteUpdate------');
                next();
            },
            beforeRouteLeave(to, from, next) {
                console.log('------RouteLeave------');
                next();
            }

        }

六、嵌套路由

实际生活中的应用界面，通常由多层嵌套的组件组合而成。在不同层级都有<router-view></router-view>，这就可能产生问题，当点击最下层的路由时，路由组件可能会显示在最上层的<router-view></router-view>上，这就需要使用给路由设置层级的父子关系。
给路由设置子路由要使用children

let routes = [
            {
                path: '/student',
                component: Student,
            },
            {
                path: '/course',
                component: Course,
    		    children: [
                    {
                        path: 'grade',
                        component: CourseGrade,
                    },
                    {
                        path: 'plan',
                        component: CoursePlan,
                    },
                ]
            },
        ]

有了层级关系之后，Vue在渲染的时候就会根据这个层级关系，找到合适<router-view></router-view>再进行渲染。

总结：

今天总结的内容较多，Router是Vue中非常重要的一个东西，在做项目的时候会经常用到，这里整理的都是一些比较常用的东西，还有一些别的内容我会后续在整理出来