Web前端系列之Vue组件与路由应用解析

天涯幺妹

于 2024-07-28 11:42:16 发布

阅读量432

点赞数 12

分类专栏： web前端技术毕业设计与项目实战项目管理文章标签： vue.js 前端 javascript 前端框架 sublime text webstorm node.js

本文链接：https://blog.csdn.net/sinat_30844883/article/details/140741698

版权

毕业设计与项目实战同时被 3 个专栏收录

28 篇文章 0 订阅

订阅专栏

web前端技术

17 篇文章 0 订阅

订阅专栏

项目管理

15 篇文章 0 订阅

订阅专栏

内容导读

vue组件应用

vue路由功能

一、vue组件应用

vue中的组件是页面中的一部分，通过层层拼装，最终形成了一个完整的组件，实现模块化设计。这也是目前前端最流行的开发方式。

Vue中组件可以分为：根组件、全局组件、局部组件。

1.1 组件的分类

1、根组件

<body>
    <div id="app"></div>

    <!--导入vue3的库,如果不能使用,请从官网查询最新的地址-->    
    <script scr="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        let app = Vue.createApp({}); //Vue实例
        let vm = app.mount('#app');  //根组件
    </script>
</body>

Vue.createApp({}) 实际是建立一个Vue实例。

Vue.createApp({}).mount('#app') 将Vue的实例挂载到一个DOM节点上，就成为一个根组件。2、2、全局组件

直接挂载到Vue实例上的组件就是一个全局组件。全局组件可以应用在任何一个根组件中。

<body>
    <div id="app1">
        <h3>app1</h3>
        <mycomponent></mycomponent>
        <mycomponent></mycomponent>
    </div>
    <div id="app2">
        <h3>app2</h3>
        <mycomponent></mycomponent>
        <mycomponent></mycomponent>
    </div>
     
    <!--导入vue3的库,如果不能使用,请从官网查询最新的地址-->    
    <script scr="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        //创建Vue实例
        let app = Vue.createApp({});
        //在Vue实例上创建一个mycomponent全局组件
        app.component('mycomponent', {
            template: '<p>我是全局组件</p>'
        });
        
        //全局组件可以应用在任何一个根组件中
        //app.mount('#app1');
        app.mount('#app2');
    </script>
</body>

使用vue.component()注册组件，需要提供2个参数：组件的标签名和组件构造器。

组件构造器中的template中设置组件的html模板。

因为组件是可复用的vue实例，所以它们也能有data、computed、watch、methods以及生命周期钩子函数等。

<body>
    <div id="app">
        <mycomponent></mycomponent>
    </div>

    <!--导入vue3的库,如果不能使用,请从官网查询最新的地址-->    
    <script scr="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        //创建Vue实例
        let app = Vue.createApp({});
        //在Vue实例上创建一个mycomponent全局组件
        app.component('mycomponent', {
            template: `<div>
                          <h3>我是全局组件</h3>
                          {{num}} <button @click="add">加</button>
                       </div>`,
            data() {
                return {
                    num: 1
                }
            },
            methods: {
                add() {
                    this.num++;
                }
            }
        });
        app.mount('#app');
    </script>
</body>

组件模板的内容，可以写在一对反引号中（``），这样就可以不使用字符串拼接的形式了。

3、局部组件

全局组件可以在根组件的任何地方使用。

但一旦定义了全局组件，就会占用系统资源。因为即使是你并不使用某个组件，它仍然会被包含在最终的构建结果中。这就造成了用户下载的JS无谓增加。

声明在根组件上的组件就是一个局部组件。局部组件只能应用在根组件中。而且，局部组件只有在使用时才会耗费系统资源。

<body>
    <div id="app">
        <mycomponent></mycomponent>
    </div>
   
    <!--导入vue3的库,如果不能使用,请从官网查询最新的地址-->    
    <script scr="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        Vue.createApp({
            components: {
                mycomponent: {
                    template: `<div>
                          <h3>我是局部组件</h3>
                          {{num}} <button @click="add">加</button>
                       </div>`,
                    data() {
                        return {
                            num: 1
                        }
                    },
                    methods: {
                        add() {
                            this.num++;
                        }
                    }
                }
            }
        }).mount('#app');
    </script>
</body>

随堂练习: 编写组件<car></car>内容为插入一辆轿车的照片。

1.2 自定义组件

自定义组件：实现代码复用、更灵活设计。

1、网页代码

<body>
<h3>2.自定义组件Compoent的应用</h3>
 <!--自定义组件：其实就包含网页标签或内容的前端代码块-->
<!--使用组件,能够更灵活更方便设计前端项目,vue框架就是通过组件来完成网页设计-->
<!--组件就是模块,类似积木,方便搭建项目并实现代码的复用-->
<h5>1.自定义全局组件</h5>
<div id="myapp">
            <p>{{msg}}</p>
            <myabc></myabc>
</div>
<h5>2.自定义局部组件</h5>
<div id="youapp">
<youabc></youabc>
</div>
</body>

2、js代码

<!--导入vue3的库,如果不能使用,请从官网查询最新的地址-->    
<script scr="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
//1.全局组件的生成
//(1)创建vue的实例对象
const myapp = createApp({
    data() {
        return {
            msg:'你好'
        }
    }
})
let age=19;
//console.log("----"+myapp.$data.msg);
//(2)创建自定义全局组件,其实js的对象,组件名建议首字母大写
const MyCompoent = {
    //模板,用于指定自定义组件中所使用标签与内容
    template: "<i style='color:orange'>斜风细雨不须归-全局组件" +age+ "</i>"
}
//(3)将组件注册到实例对象上
myapp.component('myabc', MyCompoent);
//(4)myapp挂载容器元素
myapp.mount('#myapp');

//2.局部组件的生成
const youapp = createApp({});
//直接在实例对象添加一个匿名的组件
youapp.component('youabc', {
    template: "<h5 style='color:red'>桃花依旧笑春风-局部组件</h5>"
})
youapp.mount('#youapp')
</script>

说明：自定义组件名或之后vue-cli项目中的组件文件名，建议使用首字母大写的驼峰式命名方式。

二、vue路由功能

1、vue路由根据用户指定的url地址实现页面或组件的切换，它不仅能切换整个页面，也能很方便实现在一个页面进行局部的切换。

简单地说，就是在一个切换能够变换不同的内容。

2、vue通过路由功能实现了所谓单页应用

（1）案例解析：前端网页

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的路由,实现局部内容切换</title>
    </head>
    <body>
        <h3>1.路由功能的实现</h3>
        <div id="app">
            <!--网页渲染之后会转成a标签-->
            <router-link to="/">我的主页</router-link>&ensp;
            <router-link to="/novel">小说鉴赏</router-link>&ensp;
            <router-link to="/resume">我的简介</router-link>
            <!--点击上边的路由后切换的组件的内容,在此处渲染-->
            <router-view/>
        </div>
    </body>
    <!-- 导入vue.js与vue-router.js -->
    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://unpkg.com/vue-router@4"></script>
    <!-- 导入自定义的js文件,实现路由功能-->
    <script src="js/myrouter.js"></script>
</html>

（2）案例解析：路由管理myrouter.js代码

//实现路由功能
//1.声明三个路由要对应组件,其实就三个对象
const MyHome = {
    template: "<p>轻轻地我挥挥手，作别西天的云彩</p>"
}
const MyNovel = {
    template: "<p>叶凡猛地睁开了双眼，发现自己.....</p>"
}
const MyResume = {
    template: "<p>我是李太帅，今年19岁</p>"
}
//2.设置路由(url)所对应的组件->俗称路由配置对象
//标准名称routers
const rs = [{
        //默认会打开根路径
        path: "/",
        //给路径取个别名
        //alias:'root'
        component: MyHome
    },
    {
        path: "/novel",
        component: MyNovel
    },
    {
        path: "/resume",
        component: MyResume
    }
]
//3.创建路由对象(实例),并传入路由配置
//标准名称router
 const router = VueRouter.createRouter({
     //添加一个历史记录属性才有效果
     history: VueRouter.createWebHashHistory(),
     routes:rs
     //如果路由配置对象名称与属性名routes相同，则可简为下边的方式
     //routes
 });
 //4.要将路由对象绑定到Vue的对象,否则没有路由效果
//const {createApp} = Vue;
//const app = createApp({});
 const app = Vue.createApp({});
 //vue实例使用路由对象
 app.use(router);
 //5.vue的实例挂载元素对象
 app.mount('#app');

说明：路由的跳转一般有两种方式

（1）超链接方式，类似于原生a标签功能

（2）编程式，类似于原生单击事件后location.href功能

3、路由的三种传参方式

路由跳转时传递数据，实现数据交互。

（1）query传参
query传参是最常见的一种路由传参方法，也是最简单的一种。
通过在路由路径后面加上类似于"?key=value”的参数，就可以将参数传递到目标页面或组件中。
这种传参方式的优点是方便快捷，缺点是对于较长的参数，url会变得冗长。
方式一：单个参数
传递数据
<router-link to='/gameInfo?uid='+uid></router-link>
获取数据：通过路由钩子函数
this.$route.query.uid

方式二：多个参数多，可以使用对象的形式，跳转通过匹配router的path去相应的组件
传递数据：
methods:{
go(){
this.$router.push({
path:'/getInfo',
query:{
uId:123,
gameId:3
}
});
}
}
//路由配置参考
var rs=[
{
path:'/getInfo',
name:getInfo,
//直接导入组件
component:()=>import('./views/getInfo')
}]
获取数据：依然通过路由钩子函数
this.$route.query.uId
this.$route.query.gameId

（2）params传参
params传参是另一种常见的路由传参方法。
这种方法是将参数作为路由路径的一部分，例如"/user/:id"中的“:id”就是一个参数。
通过在路由跳转时传递参数，目标页面或组件可以通过$route.params获取参数。
这种传参方式的优点是比较直观易懂，缺点是对于多个参数的传递比较麻烦。
方式一：传单个参数
传递数据：
<router link ：to='/getInfo/'+uid+"/"+gameid
路由中的配置：
{
path:'/getInfo/':uid/:gameid
name:getInfo,
//直接导入组件
component:()=>import('./views/gameInfo')
}
获取数据：在getInfo页面接收参数的时候用params接收
this.$route.params.uid 这里的uid是路由中：后边的参数

方式二：传多参，用对象
传递数据：
methods:{
go(){
this.$router.push({
name:'getInfo',
params:{
gameId:3,
userId:2
}
});
}
}
路由中的配置：
{
path:'getInfo',
name:getInfo,
component:()=>import('./views/gameInfo')
}
获取数据：另一个页面获取
this.$route.params.gameId
this.$router.params.userId

（3）props传参
props传参是通过将参数作为组件的属性传递的方式，这种传参方式需要在路由配置中设置props属性。例如：路由配置
{
path:'/user',
name:'user',
component:User,
props:{id:'123'}
}
这样，在跳转到User组件时，就可以通过props获取到id参数。
这种传参方式的优点是比较灵活，可以传递任意类型的参数，缺点是需要在路由配置中设置props，对于多个参数的传递比较麻烦。

说明：路由组件，还有路由参数、路由嵌套(子路由)、编程式路由(push/replace/go)、命名路由、路由重定向、路由别名等多种技术要点，感兴趣的朋友可以参考vue的官方网站。

更多精彩内容请继续关注本站！

天涯幺妹

关注

12
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
Web前端系列之Vue组件与路由应用解析

vue中的组件是页面中的一部分，通过层层拼装，最终形成了一个完整的组件，实现模块化设计。这也是目前前端最流行的开发方式。vue路由根据用户指定的url地址实现页面或组件的切换，它不仅能切换整个页面，也能很方便实现在一个页面进行局部的切换。
复制链接

扫一扫

专栏目录