Vue框架——基本知识点+示例（4）

最新推荐文章于 2022-11-25 18:52:46 发布
最新推荐文章于 2022-11-25 18:52:46 发布
阅读量265 收藏
点赞数
分类专栏： Vue框架 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Whuiry/article/details/107903511
版权

01 路由定义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--
1.组件
定义组件
组件嵌套
组件传参

spa最直观的一个页面只有一个html
-->
<style>
/*<!--    默认类 用户点击到当前的内容,自动添加的类-->*/
    .router-link-active{
        color: #ff6600;
    }
</style>
<body>
<div id="app">
    <ul>
<!--        router-link页面跳转 类似于之前的a，最终渲染成了a标签，to代表的是路径-->
        <li>
            <router-link to="/like">
                 猜你喜欢
<!--             <img src="" alt="">如果要操作图片的话,将图片放置在此,通过自动添加的类(.router-link-active)进行操作-->
            </router-link>
        </li>
        <li><router-link to="/type">分类</router-link></li>
    </ul>

<!--    router-view渲染内容-->
    <router-view></router-view>
</div>

<!--定义模板-->
<template id="like">
    <h1>这是猜你喜欢的内容</h1>
</template>

<template id="type">
    <h1>这是分类内容</h1>
</template>

<!--vue.js只包含了基本的功能，如果需要特殊功能，专门引入-->
<script src="js/vue.js"></script>
<script src="js/vue-router.min.js"></script>
<script>
    var like={
        template:'#like',
    }
    var type={
        template:'#type'
    }

//    定义路由
    var router = new VueRouter({
    //    配置路线 为每一个路由配置路线 渲染的内容放置在router-view内部
        routes:[
            {
                path:'/like',
                component:like
            },
            {
                path:'/type',
                component: type
            },
        //    重定向，*所有的，以上都不符合的时候，加载like路由
            {
                path: '/*',
            //    ①直接路由跳转,如果有定义router-link-active类的话，可以直接使用（直接就有这个类了）
            //     redirect:'/like'

            //    ②只是单纯渲染组件，如果有定义router-link-active类的话，不会直接显示出来，要先点击一下，跳转到相应路由才行（点击后才有此类）
                component: like
            }
        ]
    })

    new Vue({
        el:'#app',
        router:router
    })
</script>
</body>
</html>

02 路由嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <router-view></router-view>
    <ul>
        <li><router-link to="/like">猜你喜欢</router-link></li>
        <li><router-link to="/type">分类</router-link></li>
    </ul>
</div>

<template id="like">
    <h1>这是猜你喜欢的内容</h1>
</template>

<template id="type">
    <div>
        <h1>这是分类的内容</h1>
        <router-link to="/wash">洗衣机</router-link>
        <router-link to="/mobile">手机</router-link>
        <router-view></router-view>
    </div>
</template>

<!--放在子路由中的内容-->
<template id="wash">
    <h1>这是洗衣机内容</h1>
</template>

<template id="mobile">
    <h1>这是手机内容</h1>
</template>

<script src="js/vue.js"></script>
<script src="js/vue-router.min.js"></script>
<script>
    var type={
        template:'#type'
    }
    var like={
        template:'#like'
    }
    var wash={
        template:'#wash'
    }
    var mobile={
        template:'#mobile'
    }

    var router = new VueRouter({
        routes:[
            {
                path:'/like',
                component:like
            },
            {
                path:'/type',
                component: type,
            //    配置子路由，type组件内部一定要有router-view。如果没有的话，则不渲染，也不报错
                children:[
                    {
                        path:'/wash',
                        component:wash
                    },
                    {
                        path: '/mobile',
                        component: mobile
                    }
                ]
            },
            {
                path: '/*',
                redirect:'/like'
            }
        ]
    })

    new Vue({
        el:'#app',
    //    对象的属性和值一样，可以简写
        router,
    })
</script>
</body>
</html>

03 路由嵌套2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <router-view></router-view>
    <ul>
        <li><router-link to="/like">猜你喜欢</router-link></li>
        <li><router-link to="/type">分类</router-link></li>
    </ul>
</div>

<template id="like">
    <h1>这是猜你喜欢的内容</h1>
</template>

<template id="type">
    <div>
        <h1>这是分类的内容</h1>
        <router-link to="/wash">洗衣机</router-link>
        <router-link to="/mobile">手机</router-link>

<!--type里面的子路由要显示,下面的wash和mobile要相应的放在type的children下-->
<!--        <router-view></router-view>-->
    </div>
</template>

<template id="wash">
    <h1>这是洗衣机</h1>
</template>

<template id="mobile">
    <h1>这是手机</h1>
</template>

<script src="js/vue.js"></script>
<script src="js/vue-router.min.js"></script>
<script>
    var type={
        template:'#type'
    }
    var like={
        template:'#like'
    }
    var wash={
        template:'#wash'
    }
    var mobile={
        template:'#mobile'
    }

    var router = new VueRouter({
        routes:[
            {
                path:'/like',
                component:like
            },
            {
                path:'/type',
                component: type,
            //    配置子路由,type组件内部一定要有router-view
            //     children:[
            //         {
            //             path:'/wash',
            //             component:wash
            //         },
            //         {
            //             path:'/mobile',
            //             component: mobile
            //         }
            //     ]
            },
            //虽然wash和mobile是子路由，但是配置在第一层路由下面，则内容渲染到第一层的router-view内部
            {
                path:'/wash',
                component:wash
            },
            {
                path: '/mobile',
                component: mobile
            },
            {
                path: '/*',
                redirect:'/like'
            }
        ]
    })

    new Vue({
        el:'#app',
        //    对象的属性和值一样，可以简写
        router,
    })
</script>
</body>
</html>

04 路由传参

路径传参 通过路径传递参数
第一步: :to="‘路径’+传递参数"(router-link中添加)
第二步: 在routes里面 to=’/路径/:参数/:参数’
第三步: 接收参数 this.$route.params

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 <div id="app">
     <h1>这是列表页</h1>
     <ul>
         <li v-for="(item,index) in list">
<!--        路径传参 通过路径传递参数
            第一步: :to="'路径'+传递参数"(router-link中添加)
            第二步: 在routes里面 to='/路径/:参数/:参数'
            第三步: 接收参数 this.$route.params
-->
             <router-link :to="'/datails/'+item.id+'/'+item.name">
                {{item.name}}
             </router-link>
         </li>
     </ul>
     <router-view></router-view>
 </div>
<template id="details">
    <h2>这是{{pro}}商品详情</h2>
</template>

<script src="js/vue.js"></script>
<script src="js/vue-router.min.js"></script>
<script>
    var details={
        template:'#details',
        data(){
            return{
                pro:''
            }
        },
        mounted(){
            console.log(111);
            //接收参数
            console.log(this.$route.params);
        },
          // 监听,当路由发生变化的时候执行
        watch:{
            $route(to,from){
                // ajax请求
                // $.ajax({
                //     data:{
                //         id:this.$router.params.a
                //     }
                // })
              console.log(to.path);
              this.pro=this.$route.params.b
            }
        },
    }

    var router = new VueRouter({
        routes:[
            {
                // '/路径/:参数/:参数'
                // path:'/details/:id/:name',
                path:'/details/:a/:b',
                component:details
            }
        ]
    })

    new Vue({
        el:'#app',
        data:{
            list:[
                {
                    name:'手机',
                    id:1
                },
                {
                    name:'洗衣机',
                    id:2
                }
            ]
        },
        router
    })
</script>
</body>
</html>

05 路由应用

路由传参
第一步:to={name:对应的是配置路线里面的name值,params:{传递数据}}
第二步:配置路线里面增加name值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
<!--    第一层router-view-->
    <router-view></router-view>
</div>

<template id="index">
    <section>
<!--        第二层router-view-->
        <router-view></router-view>
            <ul>
                <li><router-link to="/like">猜你喜欢</router-link></li>
                <li><router-link to="/type">分类</router-link></li>
                <li><router-link to="/menu">必抢清单</router-link></li>
                <li><router-link to="/my">我的</router-link></li>
            </ul>
    </section>
</template>

<template id="like">
    <h1>这是猜你喜欢的内容</h1>
</template>

<template id="type">
    <div>
        <h1>这是分类内容</h1>
<!--        路由传参
        第一步:to={name:对应的是配置路线里面的name值,params:{传递数据}}
        第二步:配置路线里面增加name值
-->

        <router-link v-for="(item,index) in list" :to="{name:'d',params:{id:item.id,name:item.name}}">
            {{item.name}}
        </router-link>

        <!--        第 层 router-view-->
        <router-view></router-view>
    </div>
</template>

<template id="my">
    <h1>这是我的</h1>
</template>

<template id="menu">
    <h1>这是menu</h1>
</template>

<template id="details">
    <h1>这是{{type}}详情页</h1>
</template>

<script src="js/vue.js"></script>
<script src="js/vue-router.min.js"></script>
<script>
    var index={
        template:'#index'
    }
    var like={
        template:'#like'
    }
    var type={
        template:'#type',
        data(){
            return{
                list:[
                    // {id: 1, name: "手机"}
                    {
                        name:'手机',
                        id:1
                    },
                    {
                        name:'洗衣机',
                        id:2
                    }
                ]
            }
        }
    }
    var my={
        template:'#my'
    }
    var details={
        template:'#details',
        data(){
            return{
                type:''
            }
        },
        mounted(){
            console.log(this.$route.params);
            // 打印结果:{id: 1, name: "手机"}
            this.type=this.$route.params.name;
        },
        watch:{
            $route(to,from){
                console.log(111);
            }
        }
    }
    var menu={
        template:'#menu'
    }

    var router = new VueRouter({
        routes:[
            {
                // path:'/',
                path:'/like',
                component:index,
                children:[
                    {
                        path: '/like',
                        component: like
                    },
                    {
                        path: '/type',
                        component: type,

                        //渲染到第二层router-view,写在同一个页面中
                        // children:[
                        //     {
                        //         path:'/details',
                        //         name:'d',
                        //         component:details
                        //     }
                        // ]
                    },
                    {
                        path: '/menu',
                        component: menu
                    }
                ],
                redirect:'/like'
            },
            //写在第一层的router-view中,跳转到一个新的页面
            {
                path: '/details',
                name:'d',
                component: details
            },
            {
                path: '/my',
                component: my
            },
            {
                path: '/*',
                redirect: '/like'
            }
        ]
    })

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


</script>
</body>
</html>

06 push和replace、go

1.返回,数值可以自定义:
-1返回上一个页面 -2返回上两个页面
this.$router.go(-2);

2.push在历史记录新增一条
this.$router.push(’/like’);

3.替换当前路径(去到替换的路径页面)
this.$router.replace(’/my’);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <router-view></router-view>
</div>

<template id="index">
    <section>
        <router-view></router-view>
        <ul>
            <li><router-link to="/like">猜你喜欢</router-link></li>
            <li><router-link to="/type">分类</router-link></li>
            <li><router-link to="menu">必抢清单</router-link></li>
            <li><router-link to="my">我的</router-link></li>
        </ul>
    </section>
</template>

<template id="like">
    <h1>这是[猜你喜欢]的内容</h1>
</template>

<template id="type">
    <div>
        <h1>这是[分类]的内容</h1>
<!--        路由传参
        ①:to={name:对应的是配置路线里面的name值,params:{传递参数}}
        ②配置路线里面增加的name值
-->
        <router-link v-for="(item,index) in list" :to="{name:'d',params:{name:item.name,id:item.id}}">
            {{item.name}}
        </router-link>
        <router-view></router-view>
    </div>
</template>

<template id="menu">
    <h1>这是[menu]内容</h1>
</template>

<template id="my">
    <h1>这是[我的]内容</h1>
</template>

<template id="details">
    <h1><button @click="go()">返回</button>这是{{type}}详情页</h1>
</template>

<script src="js/vue.js"></script>
<script src="js/vue-router.min.js"></script>
<script>
    var index={
        template:'#index'
    }
    var like = {
        template:'#like'
    }
    var type = {
        template:'#type',
        //添加数据到type中
        data(){
            return{
                list:[
                    {
                        name:'手机',
                        id:1
                    },
                    {
                        name:'洗衣机',
                        id:2
                    }
                ]
            }
        }
    }
    var menu = {
        template:'#menu'
    }
    var my = {
        template:'#my'
    }
    var details = {
        template:'#details',
    //    添加数据到details中
        data(){
            return{
                type:''
            }
        },
        mounted(){
            console.log(this.$route.params);
            this.type=this.$route.params.name;
        },
        watch:{
            $route(to,from){
                console.log(to);
                console.log(from);
                console.log(111);
            }
        },
        methods:{
            go(){
            //    返回,数值可以自定义:-1返回上一个页面 -2返回上两个页面
            //     this.$router.go(-2);

            //    push在历史记录新增一条
                this.$router.push('/like');
                // console.log(this.$router);

            //    替换当前路径(去到替换的路径页面)
            //     this.$router.replace('/my');
            }
        }
    }

    //定义路由
    var router = new VueRouter({
        //配置路线
        routes:[
            {
                path:'/like',
                component:index,
                children:[
                    {
                        path:'/like',
                        component:like
                    },
                    {
                        path: '/type',
                        component: type
                    },
                    {
                        path:'/menu',
                        component: menu
                    }
                ],
                redirect:'/like'
            },
            //与index同级,渲染到第一层的router-view中
            {
                path: '/details',
                //第二步:配置路线里增加的name值
                name:'d',
                component: details
            },
            {
                path: '/my',
                component: my
            },
            {
                path:'/*',
                redirect: '/like'
            }
        ]
    })

    new Vue({
        el:'#app',
        //相当于router:router,因为同名所以可以缩写
        router
    })
</script>
</body>
</html>

07 另一种跳转实现方式

a.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    订单结算
</body>
</html>

b.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    表单页面
</body>
</html>

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--a的target和iframe的name值联系-->
<a href="a.html" target="box">结算页面</a>
<a href="b.html" target="box">表单页面</a>
<iframe src="a.html" frameborder="0" name="box"></iframe>
</body>
</html>

在这里插入图片描述

Whuiry
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue demo实例
02-16
本项目是asp.net mvc5+vue2.5的项目。适合新手参考和学习，本项目实现的功能如下： 1.不仅有vue的基本功能，而且设计到vue的组件功能。 2.实现了增删改查的功能，而且是一对多的。 3.实现了分页的功能。 4.另外，本项目无论是前台还是后台都对代码进行了注释，使得项目非常容易理解，请给打5分，非常感谢。
典型的Vue框架代码示例
02-08
vue后台管理项目演练示例，主要使用vue和element-ui实现前端效果，暂不涉及接口调用
vue框架入门小案例以及模板语法
m0_68997646的博客
10-22 347
vue框架入门hello小案例以及案例分析
Vue框架——基本知识点+示例（2）
Whuiry的博客
08-10 291
01 总结 使用vue 1.引入框架； 2.实例化对象； 3.配置参数;** vue指令 v-cloak v-if 和 v-show v-html 和 v-text v-pre 和 v-once v-model v-bind v-on v-for 02 发微博 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title&g
前端 Vue框架学习实例（六）
zhshuzi的博客
07-06 340
1.事件监听 v-on的基本使用 语法糖的写法@。。。实现一个简单计数器。 <body> <div id="app"> <h2>{{message}}</h2> <button @click="increment">+</button> <button @click="decrement">-</button> </div&g...
Vue购物车——组件化.rar
05-01
总结，"Vue购物车——组件化"案例展示了Vue如何利用组件化思想构建一个购物车功能，涵盖了组件注册、父子组件间通信和数据单向绑定的关键知识点，这些是理解和掌握Vue.js框架的基础。通过学习和实践这个案例，开发者...
vue3+ts (源码+笔记+生命周期截图)
02-14
Vue3 中引入了多个关键知识点： 1. **Composition API**：Vue3 引入了一种全新的组件编写方式——Composition API，它允许开发者将功能模块化，提高代码复用性。与 Options API 相比，Composition API 更加灵活，...
文章：前端框架——Vue中所需要的静态资源.rar
12-23
在“文章：前端框架——Vue中所需要的静态资源.rar”这个压缩包中，很可能是为了配合介绍Vue.js开发时所需的静态资源，包括但不限于HTML模板、CSS样式文件、JavaScript代码、图片以及其他辅助开发的工具或库。...
java + vue 的前后端分离的考试系统.rar
03-27
本项目——"java + vue 的前后端分离的考试系统"，就是这样一个典型示例，它结合了Vue.js前端框架与SpringBoot后端框架，实现了功能完备的在线考试系统。接下来，我们将深入探讨这一系统的相关知识点。 首先，让...
前端经典——vue实现穿梭框demo.rar
11-29
这个"vue实现穿梭框demo"不仅展示了Vue的基本用法，还可能涉及组件设计原则、用户体验优化等方面的知识。通过学习和实践这个示例，开发者可以深入理解Vue的生命周期、组件通信机制，以及如何构建交互丰富的前端应用...
Vue组件大全包括（UI组件,开发框架,服务端,辅助工具,应用实例,Demo示例)
10-17
本文为大家分享了网上比较流行的Vue组件,包括UI组件,开发框架,服务端,辅助工具,应用实例,Demo示例等开源项目,总有一款适合你
vue.js企业级架构设计示例demo
03-01
vue.js企业级架构设计示例demo，如何设计一个良好的前端架构。
VUE前端小例子
03-25
VUE前端写的一个简单资产管理的小例子，里面有简单实现布局的代码。
前端 Vue框架学习实例（一）
zhshuzi的博客
06-02 321
1.初识Vue框架 Vue是一种前端
Vue框架---初识vue案例
wdfxfff的博客
02-13 532
Vue框架学习_01day
使用 Vue 框架 实现经典例子：TodoMVC
fvcvv的博客
11-25 734
TodoMVC是一个示例项目，它使用目前流行的不同JavaScript框架的来实现同一个Demo，来帮助你熟悉和选择最合适的前端框架。学习框架最直接有效的方式就是上手练习，接下来我们将用Vue.js来完成TodoMVC的示例。
Vue框架实例成员及项目搭建
Allen
02-13 1684
文章目录Vue框架实例成员及项目搭建Vue实例成员一、el：实例二、data：数据三、methods：方法四、computed：计算五、watch：监听Vue项目环境项目安装项目创建项目移植vue项目开发：请求声明周期，组件、组件的声明周期、路由pycharm配置并启动vue项目vue项目目录结构分析vue组件全局脚本文件main.js（项目入口）改写补充字符串补充 Vue框架实例成员及项目搭建 ...
vue框架
bantoumingasong的博客
08-05 1507
vue概述 1.vue基础 是一个js框架 可以简化dom操作 响应式数据驱动 1.第一个vue程序 步骤 ①导入vue.js ②创建vue实例对象，设置el属性和data属性 ③实用简洁的模板语法把数据渲染到页面上 <body> <div id='app'> {{message}} </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">
前端 Vue框架学习实例（二）
zhshuzi的博客
07-05 213
边上班边学，学的磨磨唧唧，每次听的时候感觉秒懂，以为自己行了，可是没过几天啥都忘了，抽个时间把学的内容做一个回顾把。真是人间废物！ 1.最简单的{{}}Mustache语法 Mustache 标签将会被替代为对应数据对象上的值。无论何时，绑定的数据对象上发生了改变，插值处的内容都会更新。 这是数据绑定最常见的形式 <body> <div id="app1"> <h2>{{message}}</h2> <h
基于ssm+vue的线上旅行信息管理系统源码数据库.docx
最新发布
03-12
基于ssm+vue的线上旅行信息管理系统源码数据库.docx

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值