Vue—-理解路由

1.理解官网给出的路由例子

官网例子

https://router.vuejs.org/zh/guide/#html

自己理解路由
简单的说，路由是根据不同的 url 地址展示不同的内容或页面。
说起路由，最先想到的应该就是路由器，那么路由器的工作原理是什么呢？
路由器的功能就是一个中转站，就是把网络中的包通过一个一个路由器到达转发的目的。路由器是如何实现包的转发呢？
实现原理：
就像一个人如果在去某个地方，一定要在他的脑海里有一张地图，在每个路由器的内部也有一张地图，这张地图就是路由表。
在这个路由表中包含有该路由器掌握的所有目地网络地址，以及通过此路由器到达这些网络中最佳路径，这个最佳路径指的是路由器的某个接口或下一条路由器的地址。
所以，JavaScript中的路由也应该具有相同的原理。就是用代码来写出具有路由功能的东西，用一段JS代码，来实现路由器的功能。
简单分析一下这个官网的例子。
1）先定义路由组件

    const Foo = {
        template:'<div>foo</div>'
        };
    const Bar = {
        template:'<div>bar</div>'
    }

2)定义路由,每一个路由都对应一个组件

const routes = [
        {
            path:'/foo',
            component:Foo,
        },{
            path:'/bar',
            component:Bar
        }
    ];

3）创建路由实例创建router实例，然后传 routes（路由）配置的东西

const router = new VueRouter({
        routes:routes//可以简写 routes：routes
    })

4）创建和挂载根实例
要通过router配置参数注入路由。
从而让整个应用都具有路由功能

    const app = new Vue({
        router
    }).$mount('#app')

理解就是：就是你想去的地方，然后去路由（这个路由需要自己创建，就是创建router实例）上找地图，地图上由对应的地址，然后指引你去哪个地方。然后通过传递的路径来匹配匹配相应的页面。因为路由就是根据不同url 来匹配不同的页面。匹配到的页面会显示在里面,也就是路由的出口，也就是你找到了通过地图找到了地方。
也就是通过自己创建的路由，达到了不同的路径有不同的页面的目的。

<div id="app">
        <h1>hello app</h1>
        <p>
            <!-- 使用router-link组件来导航 -->
            <router-link to="/foo">Go to Foo</router-link>
            <router-link to="/bar">Go to Bar</router-link>
        </p>

        <!-- 
            路由出口路由匹配到的在这里
         -->
         <router-view></router-view>
    </div>

以上就是自己理解的简单路由，欢迎指正。

Vue----路由理解

Vue—-理解路由

1.理解官网给出的路由例子

官网例子

猜你喜欢