vue--vue-router 组件映射到路由

Z时代
2024-01-10
分类：综合

vue

前言

　　地址栏路由的发展经历了后端路由配置阶段、前后端分离阶段、直至单页面富应用阶段。本文来总结一下 router" title="vue-router">vue-router 的相关知识点和用法。

正文

　　1、什么是 vue-router 路由

　　路由就是SPA（单页应用）的路径管理器,vue-router就是WebApp的链接路径管理系统。

　　vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。路由模块的本质就是建立起url和页面之间的映射关系，将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们。总之，在vue中页面路径的改变就是组件的切换。

　　2、通过router-link访问路由实例

　　router-link 声明式访问路由实例，相当于a标签来改变地址来路径，并渲染对应的组件。

　　（1）普通路由的使用，分如下三步：

　　　　a、注册路由组件并定义路由表

　　　　b、创建路由实例并挂载到根实例

　　　　c、通过 router-link 组件来导航路由,通过router-view来渲染对应的组件，同时导航栏地址跳转。

　　具体代码如下：

 　　　　<body>
            <div id="app">
                <p>
                    <!-- 使用 router-link 组件来导航. -->
                    <!-- 通过传入 `to` 属性指定链接. -->
                    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
                    <router-link to="/foo">Go to Foo</router-link>
                    <router-link :to="{name:'bar',params: { bar: 123 }}">Go to Bar</router-link>
                    <router-link :to="{name:'car',query: { car: 234 }}">Go to Car</router-link>
                </p>
                <!-- 路由出口:路由匹配到的组件将渲染在这里 -->
                <router-view></router-view>
            </div>
　　　　 </body>
　　　　<script>
        // 定义 (路由) 组件。
        // 可以从其他文件 import 进来
        const Foo = { template: '<div>foo</div>' }
        const Bar = { template: '<div>bar</div>' }
        const Car = { template: '<div>Car</div>' }
        //定义路由表
        // 每个路由应该映射一个组件。 其中"component" 可以是
        // 通过 Vue.extend() 创建的组件构造器，
        // 或者，只是一个组件配置对象。
        // 我们晚点再讨论嵌套路由。
        const routes = [
            { path: '/foo', name: 'foo',component: Foo },
            { path: '/bar', name: 'bar',component: Bar },
            { path: '/car', name: 'car',component: Car }
        ]
        // 创建 router 实例，然后传 `routes` 配置
        // 你还可以传别的配置参数, 不过先这么简单着吧。
        const router = new VueRouter({
            routes // (缩写) 相当于 routes: routes
        })
        // 创建和挂载根实例。
        // 记得要通过 router 配置参数注入路由，
        // 从而让整个应用都有路由功能
        const app = new Vue({
            router
        }).$mount('#app')
        </script>

页面效果如下：

　　上面的代码中，通过router-link访问路由实例，第一个标签中to属性值匹配路由表中path属性，后面两个通过name值去匹配路由表中的name属性，并且分别传递了参数，注意观察对应的地址栏变化。

　　（2）嵌套路由

    <body>
        <div id="app">
        <p>
            <router-link to="/foo">Go to Foo</router-link>
            <router-link to="/bar">Go to Bar</router-link>
        </p>
        <router-view></router-view>
        </div>
    </body>
     <script>
        const Foo = { template: '<div>foo</div>' }
        const Bar = {
            template: `<div>
                            <router-link to="/bar/car">to Car</router-link>
                            <router-link :to="{name:'dar',query:{dar:123}}">to Dar</router-link>
                            <router-view></router-view>
                        </div>` }
        const Car = { template: '<div>Car</div>' }
        const Dar = { template: '<div>Dar</div>' }
        const routes = [
            { path: '/foo', component: Foo },
            {
                path: '/bar', component: Bar,
                children: [
                    { path: 'car',name:"car", component: Car },// 这里需要注意子路由path的用法，若前面加了"/" 表示该路由为根路径，router-link中to 需要对应根路径，不推荐在子路由前加"/"
                    { path: 'dar', name:"dar",component: Dar }
                ]
            }
        ]
        const router = new VueRouter({
            routes
        })
        const app = new Vue({
            router
        }).$mount('#app')
    </script>

　　运行效果如下：

　　上面的代码中在根路由中嵌套了子路由，同样通过router-link的方式来访问，也支持name属性匹配路由表和传递值等操作，需要注意子路由推荐使用path属性值不带"/"

　　3、通过 $router 的实例方法访问路由实例

　　通过注入路由器，我们可以在任何组件内通过 this.$router 访问路由器，也可以通过 this.$route 访问当前路由,在 Vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用 this.$router对象完成。该方法等同于前面的声明式访问路由实例。

　　this.$router.push()该方法的参数可以是一个字符串路径，或者一个描述地址的对象，该方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

    <body>
        <div id="app">
            <p>
                <button @click="handleFoo">to Foo </button>
                <button @click="handleBar">to Bar</button>
            </p>
            <router-view></router-view>
        </div>
    </body>
    <script>
        const Foo = { template: '<div>foo{{this.$route.params.foo}}</div>' }
        const Bar = { template: '<div>bar{{this.$route.query.bar}}</div>' }
        const routes = [
            { path: '/foo', name: 'foo',component: Foo },
            { path: '/bar', name: 'bar',component: Bar },
        ]
        const router = new VueRouter({
            routes 
        })
        const app = new Vue({
            router,
            methods:{
                handleFoo(){
                    this.$router.push({name:"foo",params:{foo:123}})
                },
                handleBar(){
                    this.$router.push({path:"/bar",query:{bar:234}})
                }
            }
        }).$mount('#app')
    </script>

　　运行结果如下：

　　但是在重复点击按钮，路由重复时，控制台出现报错，如下：

　　上面的报错是因为push方法导致路由重复在当前路由，这里需要在原型上修改push方法，代码如下：

    //获取原型对象上的push函数
    const originalPush = VueRouter.prototype.push;
    //修改原型对象中的push方法
    VueRouter.prototype.push = function push(location) {
      return originalPush.call(this, location).catch((err) => err);
    };

　　除了this.$router.push()之外还有别的访问路由实例方法，如：this.$router.replace()不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。

this.$router.go(n) 在history 记录中向前或者后退多少步，类似 window.history.go(n)。

　　4、this.$router 和 this.$route 的区别及使用

　　this.$router：是全局路由器 router 的实例，可以在任何组件内进行访问，路由实例里面有很多属性和方法，比如push方法。

　　this.$route：是当前激活的页面的路由信息对象，包含了当前 URL 解析得到的信息，还有 URL 匹配到的路由记录 (route records)，也有一些属性，这个属性是只读的，里面的属性是 immutable (不可变) 的，不过你可以 watch (监测变化) 它。

总之，可以在任何组件内通过 this.$router 访问路由器，也可以通过 this.$route 访问当前路由。

　　5、动态路由

　　某些情况下，一个页面的path路径可能是不确定的，比如我们进入用户界面时，希望是如下的路径： /user/aaaa或/user/bbbb。除了有前面的/user之外，后面还跟上了用户的ID 这种path和Component的匹配关系，我们称之为动态路由(也是路由传递数据的一种方式)。代码如下：

    <div id="app">
        <p>
            <router-link to="/foo">Go to Foo</router-link>
            <router-link to="/bar/123">Go to Bar</router-link>
        </p>
        <router-view></router-view>
    </div>
    <script>
        const routes = [
          { path: "/foo", component: Foo },
          { path: "/bar/:id", component: Bar },
        ];
        const router = new VueRouter({
          routes,
        });
        const app = new Vue({
          router,
        }).$mount("#app");
    </script>