Vue小tips-d06

一、作用域插槽

子组件上有数据,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'
}

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

 

上一篇:tips记录


下一篇:你真的熟练运用 HTML5 了吗,这10 个酷炫的 H5 特性你会几个?