Vue小tips-d06

2024-03-01 20:42:16

一、作用域插槽

子组件上有数据，html代码结构由父组件来提供

子组件：

<template>
    <div>
        <h1>子组件</h1>
        <!-- 子组件上有数据，但是具体的html结构是什么不确定 -->
        <ul>
            <slot v-for="item of arr" name="list" :val="item"></slot>
        </ul>
    </div>
</template>

<script>
export default {
    data(){
        return{
            arr:['web前端','ui设计','大数据']
        }
    }
}
</script>

父组件：

<template>
    <div>
        <h1>父组件</h1>
        <!-- 父组件使用子组件时，提供具体的html结构 -->
        <v-child>
            <!-- 
                脚手架中v-for和v-if不建议混在一起用，所以这里用了template标签
                v-slot:插槽名称="形参"
                形参用来获取子组件传递过来的数据 
            -->
            <template v-slot:list="props">
                <li>{{ props.val }}</li>
            </template>
        </v-child>
    </div>
</template>

<script>
import vChild from './Child'
export default {
    components:{
        vChild
    }
}
</script>

二、路由【重点】

1、介绍

Vue Router 是 Vue.js 官方的路由管理器。

它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。

嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式，在 IE9 中自动降级
自定义的滚动条行为

2、安装

(1)初始化项目选择安装vue-router

　　Install vue-router? (Y/n) y

(2)手动安装

　　npm i vue-router --save

3、基本使用

在/src/main.js中编写程序代码

第一步：引入vue-router插件

import VueRouter from 'vue-router'

第二步：vue使用vue-router

Vue.use(VueRouter)

vue使用vue-router，此时vue实例上会增加$route和$router两个配置选项，但是内容是undefined

第三步：引入需要使用的页面组件

import vIndex from './components/Index'
import vOrder from './components/Order'

第四步：实例化vuerouter并设置路由映射表关系

var router = new VueRouter({
    //定义路由映射配置表
    routes:[
        { path:'/index',component:vIndex },
        { path:'/order',component:vOrder }
    ]
})

第五步：在vue实例上增加一个router配置选项

new Vue({
  el: '#app',
  components: { App },
//   router:router,
    router,
  template: '<App/>'
})

第六步：在App.vue中添加路由出口

<template>
    <div id="app">
        <router-view></router-view>
    </div>
</template>

4、路由导航

①内置组件

router-link

它会生成一个a标签，需要添加一个to属性，属性值是path属性的内容

非必要属性active-class，设置激活状态的类名

active-class 模糊匹配
exact-active-class 精确匹配

<router-link exact-active-class="active" to="/">首页</router-link>
<router-link active-class="active" to="/user">用户管理</router-link>
<router-link active-class="active" to="/info">个人信息</router-link>

②编程式导航

$router

push：把已访问的路由规则添加到历史记录中，并跳转页面
replace：把指定的路由规则替换到已访问的历史记录中，并跳转页面
go(-1)：回退

　例：

　　【/index，/order】 push ->order

　　【/index，/music】 replace ->music

5、路由重定向

{ path:'*',redirect:'/重定向目标路由规则' }

星号是通配符，表示没有匹配到任何一个路由规则。

redirect属性的内容是path属性的属性值，只有加上了redirect属性，当访问一个不存在的路由规则时，浏览器地址重新定向到指定的路由规则地址上。

6、路由嵌套

　　①创建几个页面组件

　　②在原有的一级路由规则上添加一个children属性，作为它的子级路由规则

export default new Router({
    //定义路由映射配置表
    routes: [
        { 
            // 一级路由规则要以斜杠开头
            path: '/index', 
            component: Index,
            children:[
                // 二级路由规则，不需要写斜杠
                { path:'food',component:Food },
                { path:'movie',component:Movie }
            ]
        },
        { path: '/order', component: Order },
        { path:'/music',component:Music },
        { path:'*',redirect:'/index' }
    ]
})

　　③在一级路由规则对应的页面组件中要有路由出口

<div class="index">
    <!-- 二级路由导航，to属性必须要把一级路由规则和二级路由规则都补全 -->
    <router-link to="/index/food">美食</router-link>
    <router-link to="/index/movie">电影</router-link>
    <router-view></router-view>
</div>

7、路由传参

(1)动态路由

　　①创建一个用户详情页面组件

　　②定义一个动态路由规则，指向用户详情页面组件

　　/src/router/index.js

 { path:'user/:uid',component:UserInfo }

　　③在用户表格页面点击编辑按钮进行页面跳转

<button @click="toInfo(useritem.id)" class="btn btn-primary">编辑</button>

methods:{
    toInfo(uid){
        this.$router.push('/user/'+uid)
    }
}

　　④在用户详情页面获取路由参数

<p>编号：{{ $route.params.uid }}</p>

(2)查询参数

当路由中参数数量不固定时，可以使用查询参数方式

查询参数和动态路由不能混用

　　①设置一个固定路由规则

{path:'user/info',component:UserInfo}

　　②在用户表格页面跳转时使用qs插件

<script>
import qs from 'qs'
export default {
    methods:{
        toInfo(uid){
            // 通过$router进行页面跳转
            // this.$router.push('/user/'+uid.id+'/'+uid.phone)
            this.$router.push('/user/info?'+qs.stringify(uid))
        }
    }
}
</script>

　　③在用户详情页面获取路由参数

<p>编号：{{ $route.query.id }}</p>
<p>手机号：{{ $route.query.phone }}</p>
<p>姓名：{{ $route.query.name }}</p>

三、路由进阶

1、路由模式

hash，默认模式，在浏览器地址中有#，#号后面的内容会被解析成路由规则，当路由规则变化时，不会重新发起网络请求。
history，在浏览器地址中没有#，利用html5中的historyApi进行页面跳转。打包的项目，部署上线时，需要后端配置web服务器的转发规则，不然会出现404。

2.路由命名

　　在定义路由规则时，可以给指定的路由规则设置一个name属性

// { path:'user/:uid/:phone',component:UserInfo },
{
    path:'user/info',
    component:UserInfo,
    name:'xiangqing'
}

　　在进行页面跳转时，可以使用name属性作为路由的标识

export default {
    methods:{
        toInfo(uid){
            // 通过$router进行页面跳转
            // this.$router.push('/user/info?'+qs.stringify(uid))
            this.$router.push({
                name:'xiangqing',
                query:uid
            })
        }
    }
}
</script>

3、路由别名

　　alias

{ 
    path:'/login',
    component:Login,
    alias:'/denglu'
}

别名设置好之后，原来的路由规则和别名都可以访问。

码农公寓