Vue基础复习(6)vue-router路由管理器

卷心菜007

已于 2022-04-02 00:40:46 修改

阅读量285

点赞数

分类专栏： Vue2 文章标签： vue.js javascript elementui

于 2022-03-08 14:53:23 首次发布

本文链接：https://blog.csdn.net/m0_65912225/article/details/123353639

版权

Vue2 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

vue2.X vue-router路由管理器

Vue-router是Vue官方的路由管理器,是vue.js的核心深度集成,让构建页面更简单

官方文档：介绍 | Vue Router

路由的基本使用

(1) 安装vue模块:初始化:npm init -y 安装Vue:npm i vue@2.6.10 安装路由模块:npm install vue-router@3.5.3

(2) router-link:使用一个自定义组件 router-link 来创建链接。这使得 Vue Router 可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码。

router-view:将显示与Url对应的组件，可放在任意地方

<body>

    <style>

        .main{

            border: 3px solid purple;

            width: 500px;

            height: 500px;

        }

    </style>

    <div id="app">

        <div class="header">

            <h1>头部</h1>

        </div>

        <div class="left">

            <p>

                <ul>

                    <li>

                        <a href="#/foo">Foo的a标签</a>

                    </li>

                    <li>

                        <a href="#/bar">Bar的a标签</a>

                    </li>

                    <li>

                        <!-- 使用router-link组件进行导航 相当于a标签 通过传递to来指定连接 可以没有#哈希值 -->

                        <router-link to="#foo">Foo的a标签2</router-link>

                    </li>

                    <li>

                        <router-link to="#bar">Bar的a标签2</router-link>

                    </li>

                </ul>

            </p>

        </div>

        <div class="main">

            <!-- 路由出口：路由匹配上，对应组件要显示的区域 -->

            <router-view></router-view>

        </div>

    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>

    <script src="./node_modules/vue-router/dist/vue-router.js"></script>

    <script>

        //定义路由组件，也可以从其他文件导入

        const Foo = {

            template:"<div>foo组件内容</div>"

        }

        const Bar = {

            template:"<div>Bar组件内容</div>"

        }

        //配置路由器：根据url地址的变化，配置要显示的组件

        // 每个路由都需要映射到一个组件

        const router = new VueRouter({

            //匹配每一个路由显示的组件是什么

            // 创建路由实例并传递由routes配置

            routes:[

                //和a标签的地址相对应

                {path:"/foo",component:Foo},

                {path:"/bar",component:Bar},

            ]

        })

        new Vue({

            el:"#app",

            // es6的简写 router:router

            router, //将路由器注入到vue实例当中

        })

    </script>

</body>

运行效果：

点击foo时：