Vue 快速入门(七)

 

 

 

本节介绍Vue入门级组件概念

 

01 - VueRouter

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成 ，让构建单页面应 用变得易如反掌。
VueRouter 是 SPA  (单页应用)  的路径管理器 ，它允许我们通过不同的 URL 访问不同的内容。

  • vue-router安装

这里我们先安装，安装时指定版本号，如：

npm i vue-router@3.5.1

  • vue-router实例

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script src="./node_modules/vue/dist/vue.js"></script>
    <script src="./node_modules/vue-router/dist/vue-router.js"></script>
    <div id="app">
        <router-link to="/index">首页</router-link>
        <router-link to="/home">目录</router-link>
        <router-view></router-view>
    </div>

    <script>

        let Index = Vue.component('index', {
            template: `<div>同学，你好</div>`
        });
        let Home = Vue.component('home', {
            template: `<div>今天学到哪里来了？</div>`
        });
        const router = new VueRouter({
            routes: [
                {
                    path: '/index',
                    component: Index
                },
                {
                    path: '/home',
                    component: Home

                }
            ]

        })
        new Vue({
            el: "#app",
            router: router

        })
    </script>
</body>

</html>
运行效果：初始界面：

 

 

 

单击首页：

 

 

 

单击目录：

 

 

 

综上就是路由的入门级介绍，更多用法可参考官方文档研究。

 

工欲善其事，必先利其器！

posted @ 2023-01-26 22:07  全栈测试开发日记  阅读(50)  评论(0)    收藏  举报